如何利用css var做一个dark mode方案

本文的主要背景:

  1. 希望利用css变量实现dark和light模式的切换
  2. 原有的工程都是less形式定义的css,并且还有less的函数,比如fade等,不想手动改less的函数,希望该插件能支持解析less函数
  3. 需要支持局部不切换模式,比如某个区域是固定的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对象是函数名到函数体的映射,所以我们将需要重写的函数重置成我们自定义的即可。而函数的计算结果通过calcvar两个css函数以及css变量进行表示,在页面中即可根据css变量进行实时计算!

下面只摘出来了我们支持的其中两个函数——fadedarkenfade利用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变量表示。

image.png

第三步:局部light模式如何支持?【使用postcss插件】

可以在dom节点上添加classname前缀,用来标注该dom下的样式都使用静态的亮色模式,不随主题切换。这里需要做的主要分为3步:

1. 第1步:【添加dom前缀classname】

在相应的dom节点添加classname前缀,比如static-light

// 原来的dom结构
aaa
// 新的dom结构
aaa
2. 第2步:【追加前缀样式】
  1. 生成样式时,通过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。

  1. 第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. 第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);
    })

})
  1. 第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...

你可能感兴趣的:(如何利用css var做一个dark mode方案)