README
PostCSS Darkmode
Generate darkmode style from css file.
分析 CSS 文件中的颜色,生成「深色模式」的样式。
Installation 安装
$ npm install postcss-darkmode --save-dev
Options 配置
ratio
(number) :亮度调整的百分比,默认为 10assignColors
(array): 颜色替换表,如assignColors: [ ["#D6AB56"], // 保持颜色不变 ["#ff6022", "#f25b20"], // #ff6022 替换为 #f25b20 ]
ignoreExistingDarkMediaQuery
(boolean): 不处理 css 文件中已有的 darmkmode Media Query 中的颜色规则, 默认为 trueignoreFiles
(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);
}
}