Have ideas to improve npm?Join in the discussion! »

css-theme-manager

1.0.0 • Public • Published

CSS Theme Manager

license All Contributors

version downloads size gzip size

Watch on GitHub Star on GitHub Tweet

Zero dependency lib to manage CSS themes easily for your app

How to use

Install the package

npm install css-theme-manager --save
// or with yarn
yarn add css-theme-manager

Import it and init the CSS Theme Manager with a default theme. A theme is an object with the name of your variables as keys and the value of the variables as the value.

import CSSThemeManager from './manager'
 
const themeManager = new CSSThemeManager({
  'bg-color': '#fff',
  'text-color': '#darkblue',
  'featured-font': 'Verdana, sans-serif'
})

This will create and insert the given variables in the :root selector. All the variables created with this CSS Theme Manager will have a csstm- prefix. The code above will result in:

:root {
    --csstm-bg-color: '#fff';
    --csstm-text-color: '#darkblue';
    --csstm-featured-font: 'Verdana, sans-serif';
}

Check the API Reference below to check all that you can do with this package.

API Reference

createTheme(name: String, config: Object)

Creates and registers a new theme with the given name and config.

// import and init the themeManager
// ...
themeManager.createTheme('dark', {
  'bg-color': '#222',
  'text-color': '#ddd'
})

applyTheme(selector: String, theme: String)

Applies the given theme to all elements matching the given selector. You can pass any selector you would pass to the document.querySelectorAll function.

// import and init the themeManager
// ...
themeManager.createTheme('dark', {
  'bg-color': '#222',
  'text-color': '#ddd'
})
 
themeManager.applyTheme('html', 'dark')

removeTheme(theme: String)

Removes and unregisters the given theme.

// import and init the themeManager
// ...
themeManager.createTheme('dark', {
  'bg-color': '#222',
  'text-color': '#ddd'
})
 
themeManager.applyTheme('html', 'dark')
themeManager.removeTheme('dark')

Contributors

Thanks goes to these wonderful people (emoji key):


Wendell Adriel

💻 📖 💡 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

Install

npm i css-theme-manager

DownloadsWeekly Downloads

3

Version

1.0.0

License

MIT

Unpacked Size

12.7 kB

Total Files

7

Last publish

Collaborators

  • avatar