Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

load-themed-styles

1.2.0 • Public • Published

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 load-themed-styles

Usage

To load a given string of styles, you can do this:

import { loadStyles } from '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 '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.

License

MIT © David Zearing

Keywords

none

install

npm i load-themed-styles

Downloadsweekly downloads

71

version

1.2.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability