css/less 實現(xiàn)動態(tài)更換主題色

固定主題色的切換

思路：訪問網(wǎng)頁 => js讀取緩存(判斷是否有主題色的值，沒有就默認(rèn)皮膚奈偏，有則使用指定皮膚) => 用戶點擊換膚 => js切換對應(yīng)的css樣式文件即可 => 再將主題色的值寫入緩存

下面給大家兩種方式供選擇

切換css地址

<link type="text/css" rel="stylesheet" media="all" href="../theme1.css" id="theme_css" />
document.getElementById('theme_css').href = '../XXX.css';
假如我們有default.css / blue.css / red.css 三個主題泡徙，這樣我們就需要在書寫css的時候維護(hù)三個主題樣式表萍虽，js點擊切換的時候通過改變css樣式表鏈接來實現(xiàn)換膚功能轴脐。

**弊**：
- 需要同時維護(hù)N個文件
- js改變href屬性會帶來一定的延遲

HTML的rel屬性下的alternate實現(xiàn)

<link href="reset.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css" title="default">
<link href="blue.css" rel="alternate stylesheet" disabled type="text/css" title="blue">
<link href="red.css" rel="alternate stylesheet" disabled type="text/css" title="red">

css樣式文件大致分為三類：

沒有title屬性债热，rel屬性值僅僅是stylesheet的<link>無論如何都會加載并渲染砾嫉，如reset.css；
有title屬性窒篱，rel屬性值僅僅是stylesheet的<link>作為默認(rèn)樣式CSS文件加載并渲染焕刮，如default.css；
有title屬性墙杯，rel屬性值同時包含alternate stylesheet的<link>作為備選樣式CSS文件加載配并，默認(rèn)不渲染，如blue.css和red.css高镐；

alternate意味備用溉旋，相當(dāng)于是 css 預(yù)加載進(jìn)來備用，所以不會有上面那種切換延時

使用方法：
JavaScript代碼修改<link>元素DOM對象的disabled值為false嫉髓，可以讓默認(rèn)不渲染的CSS開始渲染观腊。

// 需要換膚的時候傳入對應(yīng)的title即可，eg: skirColorChange( 'blue' );
var eleLinks = document.querySelectorAll('link[title]');
var skirColorChange = function ( value ) {
  eleLinks.forEach(function (link) {
      link.disabled = true;
      if (link.getAttribute('title') == value) {
          link.disabled = false;
      }
  });
}

弊：

提前下載算行，會浪費單寬
仍舊需要維護(hù)多個文件

動態(tài)色值的主題切換

如果是要實現(xiàn)動態(tài)換膚梧油，自定義色值，那上面的幾種方式就不適合了州邢。

思路：訪問網(wǎng)頁 => js讀取緩存(判斷是否有主題色的值儡陨，沒有就默認(rèn)皮膚，有則使用指定皮膚) => 用戶點擊換膚 => js切換主題色 => 再將主題色的值寫入緩存

下面給大家兩種方式供選擇

less的 modifyVars方法

modifyVars方法是是基于 less 在瀏覽器中的編譯來實現(xiàn)量淌。所以在引入less文件的時候需要通過link方式引入骗村，然后基于less.js中的方法來進(jìn)行修改變量

script引入less.min.js
<script type="text/javascript" src="/static/less.min.js" />
link方式引入主題色文件
<link rel="stylesheet/less" type="text/css" href="/static/public.less" />
更改主題色事件

// color 傳入顏色值
handleColorChange (color) {
    less.modifyVars({
         '@primaryColor':color
    })
    .then(() => {
         console.log('修改成功');
    });
};

如果工程型的項目，在webpack配置里開啟：

{
      test: /\.less$/,
      loader: 'less-loader',
      options: {
          javascriptEnabled: true
      }
},

如果是vueCli3.0/vueCli4.0,給大家一份完整的配置過程

首先在vue.config.js配置呀枢；

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 按需配置叙身，可配置多個
          'primary-color': 'red',
        },
        javascriptEnabled: true,
      }
    }
  },

在public/static/下創(chuàng)建color.less, 這個文件書寫所有涉及到需要改變的class及樣式；

@primaryColor: red;
.page {
  backgroud: @primaryColor;
  color: @primaryColor;
}

在public/static/下創(chuàng)建less.min.js硫狞；
src/XXXX位置創(chuàng)建setting.js信轿；

let lessNodesAppended;

const updateTheme = primaryColor => {
  if (!primaryColor) {
    return;
  }
  console.info(`正在編譯主題!`)
  function buildIt() {
    // 正確的判定less是否已經(jīng)加載less.modifyVars可用
    if (!window.less || !window.less.modifyVars) {
      return;
    }
    // less.modifyVars可用
    window.less.modifyVars({
        '@primary-color': primaryColor,
      })
      .then(() => {
        console.log(`成功`);
      })
      .catch(() => {
        console.error(`失敗`);
      });
  }
  if (!lessNodesAppended) {
    // insert less.js and color.less
    const lessStyleNode = document.createElement('link');
    const lessConfigNode = document.createElement('script');
    const lessScriptNode = document.createElement('script');
    lessStyleNode.setAttribute('rel', 'stylesheet/less');
    // 下方這個color.less位置大家也可以按需修改
    lessStyleNode.setAttribute('href', __webpack_public_path__ + 'static/color.less')
    lessConfigNode.innerHTML = `
      window.less = {
        async: true,
        env: 'production',
        javascriptEnabled: true
      };
    `;
    // less的src地址也可以是cdn地址
    lessScriptNode.src = '/static/less.min.js';
    lessScriptNode.async = true;
    lessScriptNode.onload = () => {
      buildIt();
      lessScriptNode.onload = null;
    };
    document.body.appendChild(lessStyleNode);
    document.body.appendChild(lessConfigNode);
    document.body.appendChild(lessScriptNode);
    lessNodesAppended = true;
  } else {
    buildIt();
  }
};
export { updateTheme }

ok晃痴，到此為止東西都準(zhǔn)備好了，那么接下來财忽，我們需要初始化了倘核，大家可以在main.js中調(diào)用updateTheme('默認(rèn)值/你需要的主題色值')；
如果是頁面要切換仍舊是調(diào)用updateTheme('你需要的主題色值')即彪；

css 變量方法

如果項目里用的不是less, 那么還是用css的方法紧唱，通用且容易操作，使用css變量來進(jìn)行主題色的修改隶校，替換主題色變量漏益，然后用setProperty來進(jìn)行動態(tài)修改
用法就是給變量加--前綴，涉及到主題色的都改成var(--themeColor)這種方式
使用方式：

body{
   --primaryColor:red;
}
.page{
    backgroud: var(--primaryColor);
    color: var(--primaryColor);
}

要修改主題色時：
document.body.style.setProperty('--primaryColor', 'blue');

總結(jié)

至此深胳，總共給了大家4種換膚方案绰疤，如果有更好的方案，歡迎大家補充~~~