前端主题色动态变化（sass版）

 

sass本身就有变量定义，来实现修改变化全局（模版地方样式使用的颜色）：

定义：

$theme-color: #18b566;

使用：

background-color: $theme-color;

之后变色只需修改$theme-color的值即可，但这种方式是编译前的方式。

 

编译后依然有效的方式：

1. 还是要定义变量

$app-background-color: #eee;

2. 定义css方法（可以定义多个css样式）

注意：可能对应代码片段修改不生效，有时候需要加!important

@mixin app-background-color($color) {

  // 手动填的值

  background-color: $color;

  // 通过设置属性自动匹配选择颜色

  [data-theme='theme2'] & {

    background-color: #aaa;

  }

}

3. 在需要的地方使用css方法

// 页面通用样式

body{

  // 之前的写法

  // background-color: $app-background-color;

 

  // 通过css方法的写法，还是需要传递一个默认颜色

  @include app-background-color($app-background-color);

}

4. 通过修改属性，会用对应的样式

document.documentElement.setAttribute('data-theme', 'theme2')

注意：当data-theme的value错误，还是会用手动填的值

 

参考文章：

https://www.pudn.com/news/62b9c26223dfab40401a2366.html