CSS Theme Manager

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 values.

import CSSThemeManager from 'css-theme-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')

Example

You can find an example on how to work with this lib in this CodeSandbox.

Contributors

Thanks goes to these wonderful people (emoji key):

Wendell Adriel 💻 📖 💡 🤔

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