Nth Permutation Mathematics

    @microsoft/load-themed-styles
    TypeScript icon, indicating that this package has built-in type declarations

    1.10.211 • Public • Published

    @microsoft/load-themed-styles

    npm version

    Build Status Dependencies

    Loads a string of style rules, but supports detokenizing theme constants built within it.

    Install

    Install with npm

    $ npm install --save @microsoft/load-themed-styles
    

    Usage

    To load a given string of styles, you can do this in TypeScript or ES6:

    import { loadStyles } from '@microsoft/load-themed-styles';
    
    loadStyles('body { background: red; }');

    This will register any set of styles given. However, in the above example the color is hardcoded to red. To make this theme-able, replace it with the string token in this format:

    "[theme:{variableName}, default:{defaultValue}]"
    

    For example:

    loadStyles('body { background: "[theme:primaryBackgroundColor, default: blue]"');

    When loading, the background will use the default value, blue. Providing your own theme values using the loadTheme function:

    import { loadStyles, loadTheme } from '@microsoft/load-themed-styles';
    
    loadTheme({
      primaryBackgroundColor: "#EAEAEA"
    });
    
    loadStyles('body { background: "[theme:primaryBackgroundColor, default: #FFAAFA]"');

    This will register #EAEAEA as the body's background color. If you call loadTheme again after styles have already been registered, it will replace the style elements with retokenized values.

    Security considerations

    In order for style elements to be added to the DOM, a nonce attribute may need to be attached to the elements to adhere to a CSP requirements. To provide the value, you can specify the nonce value by defining a CSPSettings object on the page in global scope:

    window.CSPSettings = {
      nonce: 'nonce'
    };

    Links

    @microsoft/load-themed-styles is part of the Rush Stack family of projects.

    Keywords

    none

    Install

    npm i @microsoft/load-themed-styles

    DownloadsWeekly Downloads

    115,601

    Version

    1.10.211

    License

    MIT

    Unpacked Size

    317 kB

    Total Files

    13

    Last publish

    Collaborators

    • microsoft1es
    • odspnpm