主題色切換

這是一篇利用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