Loads themed styles.


4,0146411.10.2655 hours ago6 years agoMinified + gzip package size for @microsoft/load-themed-styles in KB



npm version

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


Install with npm

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


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';

  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'


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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.