前端主题切换

我们经常可以看到一些网站都会有类似的暗黑模式/白天模式的主题颜色切换功能，效果很炫酷，或许我们在平时的开发中也会有类似这样的功能实现，这里先提供一个思路，就是使用CSS变量 + 类名切换

首先我们单独写个css文件，里面定义我们需要的变量，只写主题切换的样式，主要就是背景色和字体颜色

@/assets/css/global.css

html.dark {
  color-scheme: dark;
}

/* 定义根作用域下的变量 */
:root {
  --theme-color: #333;
  --theme-background: #eee;
}
/* 更改dark类名下变量的取值 */
.dark{
  --theme-color: #eee;
  --theme-background: #333;
}
/* 更改pink类名下变量的取值 */
.pink{
  --theme-color: #fff;
  --theme-background: pink;
}

:root就是跟作用域下起作用，也是默认的颜色，dark和pink分别是我们切换的类名，切换类名的时候将变量值修改即可，所以我们在切换的时候，其实就是切换类名就可以了。

使用变量：

我们在切换主题需要改变颜色的地方就使用上面的变量就可以了，这里使用了transition: all .6s; 是为了达到一个改变主题颜色的时候达到一个过渡的效果

transition: all .6s;
background-color: var(--theme-background);
color: var(--theme-color);

我们可以在vuex中定义个公共的状态，比如 0 表示 dark，1 表示 pink ，这样我们只需要修改vuex中的状态就可以了，然后根据vuex中的变量动态改变dom元素的类名，类名改变，我们定义的变量也会随之改变，达到主题颜色切换的目的

下面贴个自己的写的一点儿示例代码

效果：

更多方案参考与：前端主题切换方案

猜你喜欢