如何利用css var做一个dark mode方案
本文的主要背景：
- 希望利用css变量实现dark和light模式的切换
- 原有的工程都是less形式定义的css，并且还有less的函数，比如fade等，不想手动改less的函数，希望该插件能支持解析less函数
- 需要支持局部不切换模式，比如某个区域是固定的light模式
步骤
第一步：less变量转换成css变量
这一步比较简单，less已经提供了字段用于转换，只需要添加一个配置项就可以，就是globalVars属性。可以查看example代码参考
{
loader: 'less-loader',
options: {
globalVars: LessGlobalCSSVars,
}
}LessGlobalCSSVars大概长这个样子
{
"bg-body": "var(--bg-body)",
"static-white": "var(--static-white)",
...
}less会将LessGlobalCSSVars的映射关系追加到less文件前，在进行变量查找的时候就会替换成相应的css变量比如，下面的less 文件
div {
color: @bg-body;
}less实际解析的文件内容是
bg-body: "var(--bg-body)";
static-white: "var(--static-white)"
div {
color: @bg-body;
}最后上面的文件就会被编译成
div { color: var(--bg-body);}（这也是为什么，没有定义less变量，但是使用css变量的方式编译less文件还不会报错）
第二步：less函数如何解析？【使用less插件】
但是还有一个问题是less函数应该如何解析呢？比如fade(@bg-body, 20%)，如果不经过任何处理，这个函数会抛出异常，因为var(--bg-body)并不是less能够解析的节点类型，会提示var(--bg-body)不能被转换成Color类型（less的一个节点类型），这是less的语法树解析，需要将fade函数的第一个参数解析成Color节点类型，否则就会抛异常。所以，我们需要对less函数进行改写，具体通过less插件的方式实现。修改less-loader的配置如下，增加一个插件。
{
loader: 'less-loader',
options: {
globalVars: LessGlobalCSSVars,
plugins: [
new LessSkipVarsPlugin ()
]
}
}该插件的主要作用就是重写less特有的函数！！！less的所有函数会被注册到functions中，插件暴露了该functions，因此可以通过修改响应的less函数，实现函数的覆盖。该插件的实现源代码如下，functions对象是函数名到函数体的映射，所以我们将需要重写的函数重置成我们自定义的即可。而函数的计算结果通过calc和var两个css函数以及css变量进行表示，在页面中即可根据css变量进行实时计算！
下面只摘出来了我们支持的其中两个函数——fade和darken，fade利用rgba的函数表示，而darken利用的是hsl的函数表示，主要是用rgba的表示法无法用css支持的函数表示出来，所以我们用了hsl函数。这里可以看到我们需要一些特殊的css变量，比如--bg-body-SA、--bg-body-raw、--bg-HS、 --bg-body-L,这些变量主要来源于一个原始的变量进行转换。我们利用原始的色值（bg-body）进行转换(下面代码做了省略，主要是示意)
class LessSkipVarsPlugin {
install(less, pluginManager, functions) {
functions.add('fade', function (color, percent) {
if (color.type === 'Call') {
if (color.name === 'var') {
const key = color.args[0].value.substring(2);
return `rgba(var(--${key}-raw), calc(var(--${key}-SA) * ${parseLessNumber(percent)}))`;
}
}
......
return `rgba(${red},${green},${blue},${alpha * parseLessNumber(percent)})`;
});
functions.add('darken', function (color, amount, method) {
.......
if (color.type !== 'Color')
throw new Error(`fade function parameter type error: except Color, get ${color.type}`);
const hsl = (new Color(color.rgb, color.alpha)).toHSL();
if (typeof method !== 'undefined' && method.value === 'relative') {
hsl.l = hsl.l * (1 - parseLessNumber(amount));
} else {
hsl.l = hsl.l - parseLessNumber(amount);
}
return `hsl(${hsl.h},${hsl.s},${hsl.l})`;
})
}
}经过该插件的编译，我们使用了fade函数编译的代码会被转化成css变量表示。
第三步：局部light模式如何支持？【使用postcss插件】
可以在dom节点上添加classname前缀，用来标注该dom下的样式都使用静态的亮色模式，不随主题切换。这里需要做的主要分为3步：
1. 第1步：【添加dom前缀classname】
在相应的dom节点添加classname前缀，比如static-light；
// 原来的dom结构
<div className="test">aaa</div>
// 新的dom结构
<div className="static-light">
<div className="test">aaa</div>
</div>2. 第2步：【追加前缀样式】
- 生成样式时，通过postcss为所有的样式添加static-light前缀；
这一步实际上是在css-loader的处理过程中加入了一个postcss插件，对每条规则rule额外生成一条静态样式。举个例子,我定义了如下的less样式
.test {
background-color: @static-white;
}经过该postcss插件之后，生成的产物会变成
.test {
background-color: var(--static-white);
}
.static-light .test {
background-color: var(--static-white);
}所以要怎样才能追加生成这样的css呢？可以看到css-loader的源码中，节点都经过了postcss插件的处理，我们只需要在插件列表中，加上我们的插件即可
result = await postcss([...plugins, new colorPlugin({
staticEx: {prefix:'.static-light'},
})]).process(content, {...});所以接下来可以实现我们的postcss插件
var postcss = require('postcss');
module.exports = postcss.plugin('postcss-color-and-function', function (options) {
const { staticEx } = options;
function processNode(node, type) {
let staticNode;
switch (node.type) {
......
case 'rule':
staticNode = node.clone();
staticNode.selectors = staticNode.selectors.map(i => {
return `${options.staticEx.prefix} ${i}`
});
break;
default:
break;
}
return staticNode;
}
return function (css) {
let last = [];
css.each((node, type) => {
const staticNode = processNode(node, type);
if (staticNode) {
last.push(staticNode);
}
});
css.nodes = css.nodes.concat(last);
};
});主要的实现思路是：
- 通过当前节点克隆一个一样的节点，在最后返回的时候拼接该节点，这样可以生成两份样式；
对于克隆的那份节点，追加选择器，
staticNode.selectors = staticNode.selectors.map(i => { return `${options.staticEx.prefix} ${i}` });这样就可以实现追加节点和局部css变量定义了。注:css-loader会校验参数，所以如果需要修改传入的参数格式，还需要修改options.json和normalizeOptions。
- 第3步：插入一套制定classname（这里是static-light）的css var变量。这里我们借助webpack的插件来实现，详细内容看下一部分
第四步：追加全局css变量定义【webpack插件】我们可以定义一下css变量，就可以生效了，添加@media (prefers-color-scheme: dark)可以在系统模式变化的时候切换css变量，就可以实现样式的切换。
:root {
--bg-body: "#1f1f1f";
--static-white: '#fff'
}
@media (prefers-color-scheme: dark) {
:root {
--bg-body: "#2f2f2f";
--static-white: '#fff'
}
}上面一小节中，我们还需要追加局部light样式对应的css变量，需要在上述变量的基础上追加下面的一段代码。
:root {
--bg-body: "#1f1f1f";
--static-white: '#fff'
}
@media (prefers-color-scheme: dark) {
:root {
--bg-body: "#2f2f2f";
--static-white: '#fff'
}
}
.static-light {
--bg-body: "#1f1f1f";
--static-white: '#fff'
}这样我们手动追加变量就会变得复杂，并且容易出错，所以我们可以利用webpack插件进行追加，webpack提供了各种钩子，我们可以利用这些生命周期钩子在合适的时机执行相应的逻辑。
- 第1步：【生成css文件】 我们需要保证生成css文件只会执行一次，并且保证生成文件在插入link标签之前，HtmlWebpackPlugin插件提供的生命周期钩子函数alterAssetTags，返回当前所有的资源列表，用户可以在此追加一些资源链接，所以我们可以在此生命周期钩子处，触发生成文件。
compiler.hooks.compilation.tap('LarkThemePlugin', compilation => {
HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('LarkThemePlugin', (data, cb) => {
const source = xxx;
compilation.assets['theme.css'] = { source: () => source, size: () => Buffer.byteLength(source, 'utf-8')};
cb(null,data);
})
})第2步：生成link标签引用： 上一步生成了css资源文件，我们需要在html中追加一个link标签，引用该css资源，在实际应用中，我们往往会有很多资源标签插入到html中，而我们又希望该标签可以插入到所有资源文件之前进行加载
compiler.hooks.compilation.tap('LarkThemePlugin', compilation => { HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('LarkThemePlugin', (data, cb) => { const { assetTags: { styles }} = data; styles.unshift({ tagName: 'link', voidTag: true, attributes: { href: 'theme.css', rel: 'stylesheet' } }) cb(null,data); }) })完整的webpack插件代码在下方：
const fs = require('fs'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { getRootCSSVarMap } = require('../util'); class InjectThemeWebpackPlugin { constructor({ lessVarsSet, darkTokens, lightTokens }) { this.darkTokens = darkTokens; this.lightTokens = lightTokens; } // 生成css变量的css样式 generateResult() { const generateCss = (cssObj) => { let css = ''; for (let key in cssObj) { const value = cssObj[key]; css += `${key}: ${value};` } return `:root{${css}}`; } const darkCSSObj = getRootCSSVarMap(this.darkTokens, 'DARK'); const lightCSSObj = getRootCSSVarMap(this.lightTokens, 'LIGHT'); return `${generateCss(lightCSSObj)}\n@media (prefers-color-scheme: dark) {${generateCss(darkCSSObj)}}`; } apply(compiler) { // 追加link标签 compiler.hooks.compilation.tap('LarkThemePlugin', compilation => { HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('LarkThemePlugin', (data, cb) => { const source = this.generateResult(); compilation.assets['theme.css'] = { source: () => source, size: () => Buffer.byteLength(source, 'utf-8')}; const { assetTags: { styles }} = data; styles.unshift({ tagName: 'link', voidTag: true, attributes: { href: 'theme.css', rel: 'stylesheet' } }) cb(null,data); }) }) } } module.exports = InjectThemeWebpackPlugin;注：这里需要注意，如果是多仓需要保证node_modules中只有一个
html-webpack-plugin插件，不然会出现无法追加上link标签的情况
🧭技术点快速导航：
本文涉及了less插件、postcss插件、和webpack插件的内容，对于没有插件背景的朋友会有点陌生，可以学习了解以下内容，方便补齐各个插件使用方式的信息。一个less插件的例子less.js的pluginMananger源码PostCSS 常用插件与语法介绍PostCSS API 文档 | PostCSS 中文网https://www.webpackjs.com/api...html-webpack-plugin插件的生命周期钩子
附录https://github.com/webpack-co...https://www.postcss.com.cn/ap...
转载自:https://segmentfault.com/a/1190000040864692