https://github.com/wendelladriel/css-theme-manager
Zero dependency lib to manage CSS themes easily for your app
https://github.com/wendelladriel/css-theme-manager
css management theme themes theming
Last synced: about 2 months ago
JSON representation
Zero dependency lib to manage CSS themes easily for your app
- Host: GitHub
- URL: https://github.com/wendelladriel/css-theme-manager
- Owner: WendellAdriel
- License: mit
- Created: 2019-04-24T00:08:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-24T23:10:19.000Z (over 6 years ago)
- Last Synced: 2025-04-12T13:07:15.656Z (6 months ago)
- Topics: css, management, theme, themes, theming
- Language: JavaScript
- Size: 10.7 KB
- Stars: 19
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Theme Manager
[](https://github.com/WendellAdriel/css-theme-manager/blob/master/LICENSE)
[](#contributors)
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmcharts]
[![size][size-badge]][unpkg-dist] [![gzip size][gzip-badge]][unpkg-dist]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]
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.
```js
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:
```css
: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.
```js
// 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](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)** function.
```js
// 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.
```js
// 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](https://codesandbox.io/s/p70jv0l2vj).**
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Wendell Adriel](https://wendelladriel.com)
[💻](https://github.com/WendellAdriel/jodit-vue/commits?author=WendellAdriel "Code") [📖](https://github.com/WendellAdriel/jodit-vue/commits?author=WendellAdriel "Documentation") [💡](#example-WendellAdriel "Examples") [🤔](#ideas-WendellAdriel "Ideas, Planning, & Feedback") |
| :---: |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
[downloads-badge]: https://img.shields.io/npm/dm/css-theme-manager.svg?style=flat-square
[npmcharts]: http://npmcharts.com/compare/css-theme-manager
[version-badge]: https://img.shields.io/npm/v/css-theme-manager.svg?style=flat-square
[package]: https://www.npmjs.com/package/css-theme-manager
[size-badge]: http://img.badgesize.io/https://unpkg.com/css-theme-manager/dist/css-theme-manager.js?style=flat-square&label=size
[unpkg-dist]: https://unpkg.com/css-theme-manager/dist/css-theme-manager.js
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/css-theme-manager/dist/css-theme-manager.js?label=gzip%20size&style=flat-square&compression=gzip
[github-watch-badge]: https://img.shields.io/github/watchers/WendellAdriel/css-theme-manager.svg?style=social
[github-watch]: https://github.com/WendellAdriel/css-theme-manager/watchers
[github-star-badge]: https://img.shields.io/github/stars/WendellAdriel/css-theme-manager.svg?style=social
[github-star]: https://github.com/WendellAdriel/css-theme-manager/stargazers
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20css-theme-manager!%20https://github.com/WendellAdriel/css-theme-manager%20%F0%9F%91%8D
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/WendellAdriel/css-theme-manager.svg?style=social