@liutsing/postcss-theme-colors
v0.0.1
Published
PostCSS plugin to configure light/dark color
Downloads
3
Maintainers
Readme
PostCSS Theme Colors
[PostCSS] plugin to auto inject ligth/dark theme color.
a {
color: cc(G01);
}
will be processed to:
a {
color: #fff;
}
html[data-theme='dark'] a {
color: #eee;
}
Usage
Step 1: Install plugin:
npm install --save-dev postcss @liutsing/postcss-theme-colors
or
yarn add postcss @liutsing/postcss-theme-colors --save-dev
or
pnpm 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:
module.exports = {
plugins: [
+ require('@liutsing/postcss-theme-colors')({
+ groups: {
+ G01: ['C01', 'C02'],
+ },
+ colors: {
+ C01: 'red',
+ C02: 'blue',
+ },
+ }),
require('autoprefixer')
]
}
see more options
example
cd example
yarn
yarn dev