动态切换主题

qq_40291247

已于 2023-07-06 11:02:51 修改

阅读量620

点赞数 1

分类专栏： js 文章标签：前端

于 2020-04-27 16:31:10 首次发布

本文链接：https://blog.csdn.net/qq_40291247/article/details/105792704

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一般来说换肤的需求分为两种：

一种是几种可供选择的颜色/主题样式，进行选择切换，这种可供选择的主题切换不会很多。
另一种是需要自定义色值，或者通过取色板取色，可供选择的范围就很大了

如何实现

对于可供选择的颜色/主题样式换肤的实现，一个全局class控制样式切换切换的时候js控制样式的切换，JS改变href属性值切换样式表，例如：

<link id="skincolor" href="skin-default.css" rel="stylesheet" type="text/css">

document.getElementById('#skincolor').href = 'skin-red.css';

这种实现对于，颜色和主题多了的时候，维护起来就很麻烦，需要同时维护 n 个样式文件，并且使用JS改变href属性会带来加载延迟，样式切换不流畅，体验也不好。

对于制定动态色值换肤的实现，如果是要实现动态换肤，自定义色值，那上面的方式就不适合了。 less 提供的 modifyVars 的方式进行覆盖变量来实现。modifyVars方法是是基于 less 在浏览器中的编译来实现。所以在引入less文件的时候需要通过link方式引入，然后基于less.js中的方法来进行修改变量

less.modifyVars({
  '@themeColor': 'blue'
});

link方式引入主题色文件

<link rel="stylesheet/less" type="text/css" href="./src/less/public.less" />

更改主题色事件

// color 传入颜色值
handleColorChange (color) {
    less.modifyVars({  // 调用 `less.modifyVars` 方法来改变变量值'
         @themeColor':color
         })
    .then(() => {
         console.log('修改成功');
    });
};

如果发现项目运行报错如下：

.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

那可能是没有开启 javascriptEnabled：true
在webpack配置里开启

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

less方法仅限于用less的项目才能使用，查了下sass是没有类似 less.modifyVars 这种方法的。

通用方法css 变量方法

如果项目里用的不是less, 那么还是用css的方法，通用且容易操作，使用css变量来进行主题色的修改，替换主题色变量，然后用setProperty来进行动态修改，用法就是给变量加–前缀，涉及到主题色的都改成var(–themeColor)这种方式
用之前看下兼容性
大部分主流浏览器还是支持的，而且主要是操作起来够简便。
https://caniuse.com/#search=CSS%20Variables
在这里插入图片描述
定义变量：

:root中声明相当于全局属性

:root{
   --themeColor:#000;
}

使用：

.main{
   color: var(--themeColor);
}

修改

document.body.style.setProperty('--themeColor', '#ff0000');

问题

// 主色
$primary-color: var(--primary-color,#006F6B);
// 因为因为rgba()是CSS里面的一个方法，其中参数$color的值无论填的是字符串/HEX值/RGB值，最终都会转换成RGB值，所以全局变量如果把它和rgba()一起使用就会失效
$primary-color-rgb: var(--primary-color-rgb,0,111,107);