美文网首页
css/less 实现动态更换主题色

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

作者: HaoChenxin | 来源:发表于2020-08-13 17:33 被阅读0次

    固定主题色的切换

    思路:访问网页 => 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的<link>无论如何都会加载并渲染,如reset.css;
    • 有title属性,rel属性值仅仅是stylesheet的<link>作为默认样式CSS文件加载并渲染,如default.css;
    • 有title属性,rel属性值同时包含alternate stylesheet的<link>作为备选样式CSS文件加载,默认不渲染,如blue.css和red.css;

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

    使用方法:
    JavaScript代码修改<link>元素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,给大家一份完整的配置过程

    1. 首先在vue.config.js配置;
      css: {
        loaderOptions: {
          less: {
            modifyVars: {
              // 按需配置,可配置多个
              'primary-color': 'red',
            },
            javascriptEnabled: true,
          }
        }
      },
    
    1. 在public/static/下创建color.less, 这个文件书写所有涉及到需要改变的class及样式;
    @primaryColor: red;
    .page {
      backgroud: @primaryColor;
      color: @primaryColor;
    }
    
    1. 在public/static/下创建less.min.js;
    2. 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 }
    
    1. ok,到此为止东西都准备好了,那么接下来,我们需要初始化了,大家可以在main.js中调用updateTheme('默认值/你需要的主题色值')
    2. 如果是页面要切换仍旧是调用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种换肤方案,如果有更好的方案,欢迎大家补充~~~

    相关文章

      网友评论

          本文标题:css/less 实现动态更换主题色

          本文链接:https://www.haomeiwen.com/subject/lsabdktx.html