# 使用一行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

其核心就是下面这行代码

document.querySelector('html').style = 'filter:invert(1) hue-rotate(180deg);';
1

filter是一个非常神奇的属性,能将Photoshop一些基础的滤镜效果应用到网站上

使用hue-rotate这个函数结合CSS变量动态生成过渡颜色

暗黑模式使用到两个滤镜函数:inverthue-rotate

  • invert:反相,反向输出图像着色,值为 0%则无变化,值为0~100%则是线性乘子效果,值为100%则完全反转

  • hue-rotate:色相旋转,减弱图像着色,处理非黑白的颜色,值为 0deg则无变化,值为0~360deg则逐渐减弱,值超过360deg则相当绕N圈再计算剩余的值

invert简单理解就是黑变白,白变黑,黑白颠倒。hue-rotate简单理解就是冲淡颜色。为了确保主题色调不会改变,将色相旋转声明为180deg比较合理

白色

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐