Package Exports

@microsoft/load-themed-styles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@microsoft/load-themed-styles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@microsoft/load-themed-styles

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.