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的<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种换肤方案,如果有更好的方案,欢迎大家补充~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,454评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,553评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,921评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,648评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,770评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,950评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,090评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,817评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,275评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,592评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,724评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,409评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,052评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,815评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,043评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,503评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,627评论 2 350