• Version 2.0.135
  • Published
  • 112 kB
  • No dependencies
  • MIT license


npm i @microsoft/load-themed-styles
yarn add @microsoft/load-themed-styles
pnpm add @microsoft/load-themed-styles


Loads themed styles.



function clearStyles

clearStyles: (option?: ClearStyleOptions) => void;
  • Clear already registered style elements and style records in theme_State object

    Parameter option

    specify which group of registered styles should be cleared. Default to be both themable and non-themable styles will be cleared

function configureLoadStyles

configureLoadStyles: (
loadStylesFn: (
processedStyles: string,
rawStyles?: string | ThemableArray
) => void
) => void;
  • Allows for customizable loadStyles logic. e.g. for server side rendering application

    Parameter a

    loadStyles callback that gets called when styles are loaded or reloaded

function configureRunMode

configureRunMode: (mode: Mode) => void;
  • Configure run mode of load-themable-styles

    Parameter mode

    load-themable-styles run mode, async or sync

function detokenize

detokenize: (styles: string | undefined) => string | undefined;
  • Find theme tokens and replaces them with provided theme values.

    Parameter styles

    Tokenized styles to fix.

function flush

flush: () => void;
  • external code can call flush to synchronously force processing of currently buffered styles

function loadStyles

loadStyles: (styles: string | ThemableArray, loadAsync?: boolean) => void;
  • Loads a set of style text. If it is registered too early, we will register it when the window.load event is fired.

    Parameter styles

    Themable style text to register.

    Parameter loadAsync

    When true, always load styles in async mode, irrespective of current sync mode.

function loadTheme

loadTheme: (theme: ITheme | undefined) => void;
  • Registers a set theme tokens to find and replace. If styles were already registered, they will be replaced.

    Parameter theme

    JSON object of theme tokens to values.

function splitStyles

splitStyles: (styles: string) => ThemableArray;
  • Split tokenized CSS into an array of strings and theme specification objects

    Parameter styles

    Tokenized styles to split.


interface ITheme

interface ITheme {}

    index signature

    [key: string]: string;

      interface IThemingInstruction

      interface IThemingInstruction {}

        property defaultValue

        defaultValue?: string;

          property rawString

          rawString?: string;

            property theme

            theme?: string;


              enum ClearStyleOptions

              const enum ClearStyleOptions {
              onlyThemable = 1,
              onlyNonThemable = 2,
              all = 3,
              • Themable styles and non-themable styles are tracked separately Specify ClearStyleOptions when calling clearStyles API to specify which group of registered styles should be cleared.

              member all

              all = 3
              • both themable and non-themable styles will be cleared

              member onlyNonThemable

              onlyNonThemable = 2
              • only non-themable styles will be cleared

              member onlyThemable

              onlyThemable = 1
              • only themable styles will be cleared

              enum Mode

              const enum Mode {
              sync = 0,
              async = 1,
              • In sync mode, styles are registered as style elements synchronously with loadStyles() call. In async mode, styles are buffered and registered as batch in async timer for performance purpose.

              member async

              async = 1

                member sync

                sync = 0

                  Type Aliases

                  type ThemableArray

                  type ThemableArray = IThemingInstruction[];

                    Package Files (1)

                    Dependencies (0)

                    No dependencies.

                    Dev Dependencies (2)

                    Peer Dependencies (0)

                    No peer dependencies.


                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@microsoft/load-themed-styles.

                    • Markdown
                    • HTML
                      <a href="https://www.jsdocs.io/package/@microsoft/load-themed-styles"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>