Skip to content

Commit b3079d5

Browse files
committed
Added readme
1 parent b4ccb89 commit b3079d5

1 file changed

Lines changed: 65 additions & 0 deletions

File tree

README.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# CSS Variable Theme Webpack Plugin
2+
3+
## Install
4+
5+
```bash
6+
npm install --save-dev css-variable-theme-webpack-plugin
7+
```
8+
9+
## Usage
10+
11+
```js
12+
/* webpack.config.js */
13+
const path = require('path');
14+
const ThemePlugin = require('css-variable-theme-webpack-plugin');
15+
16+
module.exports = {
17+
module: {
18+
rules: [
19+
{
20+
test: /\.css$/,
21+
use: [
22+
'css-loader',
23+
path.join(__dirname, './node_modules/css-variable-theme-webpack-plugin/loader')
24+
]
25+
}
26+
]
27+
},
28+
plugins: [
29+
new ThemePlugin({
30+
themes: {
31+
light: 'light.css',
32+
dark: 'dark.css'
33+
}
34+
}),
35+
]
36+
}
37+
```
38+
39+
Theme files support CSS variable syntax on the `:root` selector.
40+
```css
41+
/* light.css */
42+
:root {
43+
--color: black;
44+
--background-color: white;
45+
}
46+
47+
/* dark.css */
48+
:root {
49+
--color: white;
50+
--background-color: black;
51+
}
52+
```
53+
54+
Use variables from your theme files in your stylesheets.
55+
```css
56+
/* styles.css */
57+
body {
58+
color: theme-var(--color);
59+
background-color: theme-var(--background-color);
60+
}
61+
```
62+
63+
### Usage with [CSS Modules](https://github.com/css-modules/css-modules)
64+
65+
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).

0 commit comments

Comments
 (0)