css/less 实现动态更换主题色

固定主题色的切换

思路：访问网页 => js读取缓存(判断是否有主题色的值，没有就默认皮肤，有则使用指定皮肤) => 用户点击换肤 => js切换对应的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的时候维护三个主题样式表，js点击切换的时候通过改变css样式表链接来实现换肤功能。

**弊**：
- 需要同时维护N个文件
- js改变href属性会带来一定的延迟

HTML的rel属性下的alternate实现

<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的****无论如何都会加载并渲染，如reset.css；
有title属性，rel属性值仅仅是stylesheet的****作为默认样式CSS文件加载并渲染，如default.css；
有title属性，rel属性值同时包含alternate stylesheet的****作为备选样式CSS文件加载，默认不渲染，如blue.css和red.css；

alternate意味备用，相当于是 css 预加载进来备用，所以不会有上面那种切换延时

使用方法： JavaScript代码修改**元素DOM对象的disabled值为false**，可以让默认不渲染的CSS开始渲染。

// 需要换肤的时候传入对应的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;
      }
  });
}

弊：

提前下载，会浪费单宽
仍旧需要维护多个文件

动态色值的主题切换

如果是要实现动态换肤，自定义色值，那上面的几种方式就不适合了。

思路：访问网页 => js读取缓存(判断是否有主题色的值，没有就默认皮肤，有则使用指定皮肤) => 用户点击换肤 => js切换主题色 => 再将主题色的值写入缓存

下面给大家两种方式供选择

less的 modifyVars方法

modifyVars方法是是基于 less 在浏览器中的编译来实现。所以在引入less文件的时候需要通过link方式引入，然后基于less.js中的方法来进行修改变量

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/下创建color.less, 这个文件书写所有涉及到需要改变的class及样式；

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

在public/static/下创建less.min.js；
src/XXXX位置创建setting.js；

let lessNodesAppended;

const updateTheme = primaryColor => {
  if (!primaryColor) {
    return;
  }
  console.info(`正在编译主题!`)
  function buildIt() {
    // 正确的判定less是否已经加载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，到此为止东西都准备好了，那么接下来，我们需要初始化了，大家可以在main.js中调用updateTheme('默认值/你需要的主题色值')；
如果是页面要切换仍旧是调用updateTheme('你需要的主题色值')；

css 变量方法

如果项目里用的不是less, 那么还是用css的方法，通用且容易操作，使用css变量来进行主题色的修改，替换主题色变量，然后用setProperty来进行动态修改用法就是给变量加--前缀，涉及到主题色的都改成var(--themeColor)这种方式使用方式：

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

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

总结

至此，总共给了大家4种换肤方案，如果有更好的方案，欢迎大家补充~~~