主题色切换

这是一篇利用less来完成主题色切换的文章。

theme-color-generator

首先我们需要利用theme-color-generator这个包来抽取less文件中跟主题色相关的样式。

虽然这个包有点大，但是我们只是用它来生成主题色切换样式文件，并不会将其打包进文件中，所以没有关系。

install

npm install theme-color-generator

利用gulp等构建工具来执行下面配置的代码

const path = require('path');
const { generateTheme } = require('theme-color-generator');

const options = {
  stylesDir: path.join(__dirname, './src/styles'), // 要抽取主题色的less文件所在目录
  varFile: path.join(__dirname, './src/styles/variables.less'), // 跟主题色相关的变量文件
  themeVariables: ['@theme-color'], // (可选项) 指定使用`varFile`中的哪些变量 (如果没有设置，将会使用所有变量)
  outputFilePath: path.join(__dirname, './public/color.less') // 生成抽取出主题色的文件
}

generateTheme(options).then(less => {
  console.log('Theme generated successfully');
})
.catch(error => {
  console.log('Error', error);
})

接下来，我们可以使用生成的color.less文件来切换主题色了

方案1

把下面这段代码加入到你的html文件中

<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
  window.less = {
    async: false,
    env: 'production'
  };
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

现在你可以使用下面的代码来切换主题色了

window.less.modifyVars({
  '@theme-color': '#0035ff'
})

demo

方案2

我们发现方案1使用的less文件有点大，那么我们有没有什么办法达到更快的加载效果呢？
这里我们引入另一个包 theme-color-switch

const less = require('theme-color-switch');
const colorSource = require('!raw-loader!./public/color.less'); // theme-color-generator生成的主题色文件
less.render(
   colorSource,
   {
       modifyVars: {
           '@theme-color': '#0035ff' // 你想要修改的变量
       },
   },
   function(e, output) {
      if (e) {
          console.error(`Failed to update theme`);
      }
      if (output && output.css) {
          // 将返回的切换主题色后的css样式文件添加至style标签
          // 具体代码可以下载example查看
          addCSS(output.css);
      }
   }
);

同样可以轻松切换主题色，但包的大小小了很多。
demo