css-plugin-darkmode
A Preprocessor Plugin for CSS DSL(Less, Sass, SCSS). Write darkmode css as comments in one place, will be transformed to darkmode media;
Basic
Write comments using dm[]
in css which you want to add darkmode media, like
can be transformed into media like
{}
Examples
1. CSS
Before
After
/********** Added By CSS-Plugin-Darkmode **********/{}
2. Less
Before
@color1: #987786;@__dm__color1: #fff; body font-size: 14px; /* dm[color: #888;background-color: #fff;] */.class1 width: 100px; color: @color1; /* dm[color: @__dm__color1;] */ .class2, .class3 background-color: #ddd; /* dm[background-color: #888;] */ /* dm[background-image:url('base64:abcd');] */
After
@color1: #987786;@__dm__color1: #fff; body font-size: 14px;.class1 width: 100px; color: @color1; .class2, .class3 background-color: #ddd; /********** Added By CSS-Plugin-Darkmode **********/ prefers-color-scheme: dark body color: #888; background-color: #fff; .class1 color: @__dm__color1; .class2, .class3 background-color: #888; background-image: url('base64:abcd');
Usage
Webpack
const CSSDarkModePlugin = ;...rules: test: /\.less$/ use: loader: 'style-loader' loader: 'css-loader' loader: 'less-loader' options: plugins: // Use plugin here ...
Grunt
const CSSDarkModePlugin = ;...less: production: options: paths: 'styles/' plugins: // Use plugin here files: '../dist/style.css': 'styles/style.less' ...
Node (API)
const CSSDarkModeParser = Parser;const cssDarkmode =