https://github.com/willowtreeapps/css-variable-theme-webpack-plugin
Generate theme stylesheets using CSS variable syntax
https://github.com/willowtreeapps/css-variable-theme-webpack-plugin
css-variables postcss theme theming webpack-loader webpack-plugin
Last synced: about 1 year ago
JSON representation
Generate theme stylesheets using CSS variable syntax
- Host: GitHub
- URL: https://github.com/willowtreeapps/css-variable-theme-webpack-plugin
- Owner: willowtreeapps
- License: mit
- Created: 2017-02-24T18:38:09.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-04-15T15:45:28.000Z (about 7 years ago)
- Last Synced: 2025-06-03T18:27:16.321Z (about 1 year ago)
- Topics: css-variables, postcss, theme, theming, webpack-loader, webpack-plugin
- Language: JavaScript
- Size: 17.6 KB
- Stars: 0
- Watchers: 136
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# CSS Variable Theme Webpack Plugin
## Install
```bash
npm install --save-dev css-variable-theme-webpack-plugin
```
## Usage
```js
/* webpack.config.js */
const path = require('path');
const ThemePlugin = require('css-variable-theme-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
path.join(__dirname, './node_modules/css-variable-theme-webpack-plugin/loader')
]
}
]
},
plugins: [
new ThemePlugin({
themes: {
light: 'light.css',
dark: 'dark.css'
}
}),
]
}
```
Theme files support CSS variable syntax on the `:root` selector.
```css
/* light.css */
:root {
--color: black;
--background-color: white;
}
/* dark.css */
:root {
--color: white;
--background-color: black;
}
```
Use variables from your theme files in your stylesheets.
```css
/* styles.css */
body {
color: theme-var(--color);
background-color: theme-var(--background-color);
}
```
### Usage with [CSS Modules](https://github.com/css-modules/css-modules)
Use loader options `modules` and `localIdentName` to generate locally scoped CSS class names. These work the same as [css-loader](https://github.com/webpack-contrib/css-loader#css-scope).