# 使用一行css实现黑白色主题皮肤的切换
# 快速导航
# 示例
白色
# 示例代码
<template>
<div class="css-switch-theme">
<el-switch
@change="hanldeSwitchTheme"
v-model="themValue"
active-text="暗黑"
inactive-text="白色"
active-color="#42b983"
>
</el-switch>
</div>
</template>
<script>
export default {
name:"setTheme",
data() {
return {
themValue: false
}
},
methods: {
hanldeSwitchTheme(value) {
if(value) {
document.querySelector('html').style = 'filter:invert(1) hue-rotate(180deg);transition:all 300ms';
}else {
// 白色模式
console.log(value);
document.querySelector('html').style = 'filter:grayscale(0);transition:all 300ms';
}
}
}
};
</script>
<style lang="stylus" scoped>
.css-switch-theme {
display:flex;
justify-content: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
其核心就是下面这行代码
document.querySelector('html').style = 'filter:invert(1) hue-rotate(180deg);';
1
filter
是一个非常神奇的属性,能将Photoshop
一些基础的滤镜效果应用到网站上
使用hue-rotate
这个函数结合CSS变量动态生成过渡颜色
暗黑模式使用到两个滤镜函数:invert
、hue-rotate
invert
:反相,反向输出图像着色,值为0%
则无变化,值为0~100%
则是线性乘子效果,值为100%
则完全反转hue-rotate
:色相旋转,减弱图像着色,处理非黑白的颜色,值为0deg
则无变化,值为0~360deg
则逐渐减弱,值超过360deg
则相当绕N圈再计算剩余的值
invert
简单理解就是黑变白,白变黑,黑白颠倒。hue-rotate
简单理解就是冲淡颜色。为了确保主题色调不会改变,将色相旋转声明为180deg
比较合理