Skip to content
Zero dependency lib to manage CSS themes easily for your app
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.all-contributorsrc
.babelrc
.editorconfig
.eslintrc
.gitignore
LICENSE
README.md
package.json
webpack.config.js

README.md

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 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!

You can’t perform that action at this time.