PostCSS Darkmode

Generate darkmode style from css file.

分析 CSS 文件中的颜色，生成「深色模式」的样式。

Installation 安装

$ npm install postcss-darkmode --save-dev

Options 配置

• ratio (number) ：亮度调整的百分比，默认为 10
• assignColors (array)： 颜色替换表，如

  assignColors: [
      	["#D6AB56"], // 保持颜色不变
      	["#ff6022", "#f25b20"], // #ff6022 替换为 #f25b20
      ]
  

• ignoreExistingDarkMediaQuery (boolean)： 不处理 css 文件中已有的 darmkmode Media Query 中的颜色规则， 默认为 true
• ignoreFiles(array): 不需要深色转化的文件，支持正则匹配， 如 ignoreFiles: ["aaa.css", /bbb\.css/],

Control Comments 注释控制

• /* darkmode: off */ Disable all Darkmode translations for the whole block both before and after the comment. 这个注释所在的 css 规则块都不进行「深色模式」转化
• /* darkmode: ignore next */ Disable Darkmode translations only for the next property. 只忽略紧跟这个注释后的一条
• /* darkmode: {#f00} */ Replace the next property with #f00. 使用 #f00 替换紧跟这个注释后的规则的值

如果发现未生效，可能是你所用的打包程序在 postcss-darkmode 处理之前已经将注释过滤掉了，你可以在注释上添加叹号 ! ，如 /*! darmkmode: off */ 来规避注释被过滤。

Usage 使用

Use webpack

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index.js",
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/style.min.css",
            chunkFilename: "css/[id].min.css",
            ignoreOrder: false,
        }),
    ],
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: process.env.NODE_ENV !== "production",
                        },
                    },
                    "css-loader",
                    "sass-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: [
                                require("postcss-darkmode")({
                                    ratio: 10, // 亮度调整的百分比，默认为 10%
                                    assignColors: [
                                        ["#D6AB56"], // 保持颜色不变
                                        ["#ff6022", "#f25b20"], // #ff6022 替换为 #f25b20
                                        ["#ff00a0", "#e60090"],
                                        ["#ff3333", "#e62e2e"],
                                        ["#a1a1a1", "rgba(233, 237, 243, 0.1)"],
                                        ["rgba(244, 20, 20, 0.3)", "#E91E63"],
                                    ],
                                    ignoreExistingDarkMediaQuery: true,
                                    ignoreFiles: ["style.scss"], // 不需要深色转化的文件，支持正则匹配
                                    splitFiles: {
                                        enable: false, // 是否将深色样式分离为一个新的css文件
                                        suffix: ".darkmode", //深色css文件名后缀，比如 filename.css 的分离出深色文件： filename.darkmode.css
                                        destDir: "../../dist/css", //文件输出目录（相对当前要处理的css文件所在目录）
                                    },
                                    inject: {
                                        enable: false, // 是否不使用媒体查询模式，而通过类名切换深色样式
                                        injectSelector: ".__darkmode__", // 切换深色样式的类名
                                        baseSelector: "html", // 这个类名要添加在哪个选择器上
                                        keepMediaQuery: false, // 是否保留 media query 部分的代码，满足某些两种代码都需要的需求
                                    },
                                }),
                            ],
                        },
                    },
                ],
            },
        ],
    },
};

Use gulp

const gulp = require("gulp");
const postcss = require("gulp-postcss");
const darkmode = require("postcss-darkmode");
gulp.task("css", () => {
    return gulp
        .src("*.css")
        .pipe(
            postcss([
                darkmode({
                    ratio: 10, // 亮度调整的百分比，默认为 10%， 如果为0，再不自动调整颜色亮度
                    assignColors: [
                        // 颜色替换表，不在此表的颜色将按照 ratio 进行亮度调整
                        ["#D6AB56"], // 保持颜色不变
                        ["#ff6022", "#f25b20"], // #ff6022 替换为 #f25b20
                        ["#ff00a0", "#e60090"],
                        ["#ff3333", "#e62e2e"],
                        ["#a1a1a1", "rgba(233, 237, 243, 0.1)"],
                        ["rgba(244, 20, 20, 0.3)", "#E91E63"],
                    ],
                    ignoreExistingDarkMediaQuery: true, //不处理 css 文件中已有的 darmkmode Media Query 中的颜色规则， 默认为 true
                    ignoreFiles: ["style.scss"], // 不需要深色转化的文件，支持正则匹配
                    splitFiles: {
                        enable: false, // 是否将深色样式分离为一个新的css文件
                        suffix: ".darkmode", //深色css文件名后缀，比如 filename.css 的分离出深色文件： filename.darkmode.css
                        destDir: "../../dist/css", //文件输出目录（相对当前要处理的css文件所在目录）
                    },
                    inject: {
                        enable: false, // 是否不使用媒体查询模式，而通过类名切换深色样式
                        injectSelector: ".__darkmode__", // 切换深色样式的类名
                        baseSelector: "html", // 这个类名要添加在哪个选择器上
                        keepMediaQuery: false, // 是否保留 media query 部分的代码，满足某些两种代码都需要的需求
                    },
                }),
            ])
        )
        .pipe(gulp.dest("./dist/css"));
});

Before:

.box {
    width: 100%;
    /* darkmode: ignore next */
    color: #a1a1a1;
    /* darkmode: {#f0f} */
    caret-color: rgba(244, 20, 20, 0.3);
    border: 1px solid #ffb821;
    background: #fff url(icon.png);
    column-rule: thick inset #0000ff;
}
.box2 {
    /* darkmode: off */
    background: #333;
    color: #f6f8fa;
}
.box3 {
    color: pink;
    border: 1px solid green;
    background: #fff;
    /* darkmode: { linear-gradient(90deg, rgba(18, 18, 18, 0.2), #121212 40px) } */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #fff 40px);
}

After:

.box {
    width: 100%;
    /* darkmode: ignore next */
    color: #a1a1a1;
    /* darkmode: {#f0f} */
    caret-color: rgba(244, 20, 20, 0.3);
    border: 1px solid #ffb821;
    background: #fff url(icon.png);
    column-rule: thick inset #0000ff;
}
.box2 {
    /* darkmode: off */
    background: #333;
    color: #f6f8fa;
}
.box3 {
    color: pink;
    border: 1px solid green;
    background: #fff;
    /* darkmode: { linear-gradient(90deg, rgba(18, 18, 18, 0.2), #121212 40px) } */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #fff 40px);
}
@media (prefers-color-scheme: dark) {
    .box {
        caret-color: #f0f;
        border-color: #ffaf04;
        background-color: #121212;
        column-rule-color: #1a1aff;
    }
    .box3 {
        color: #ff93a6;
        border-color: #008d00;
        background: #121212;
        background: linear-gradient(90deg, rgba(18, 18, 18, 0.2), #121212 40px);
    }
}