PostCSS Theme Colors

[PostCSS] plugin to auto inject ligth/dark theme color.

1a {
2  color: cc(G01);
3}

will be processed to:

1a {
2  color: #fff;
3}
4html[data-theme='dark'] a {
5  color: #eee;
6}

Usage

Step 1: Install plugin:

1npm install --save-dev postcss @liutsing/postcss-theme-colors

or

1yarn add postcss @liutsing/postcss-theme-colors --save-dev

or

1pnpm install --save-dev postcss @liutsing/postcss-theme-colors

Step 2: Check your project for existing PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to [official docs] and set this plugin in settings.

Step 3: Add the plugin to plugins list:

1module.exports = {
2  plugins: [
3+   require('@liutsing/postcss-theme-colors')({
4+      groups: {
5+       G01: ['C01', 'C02'],
6+     },
7+     colors: {
8+       C01: 'red',
9+       C02: 'blue',
10+     },
11+   }),
12    require('autoprefixer')
13  ]
14}

see more options

example

cd example
yarn
yarn dev