使用一行css实现黑白色主题皮肤的切换

itclanCoder

发布于 2023-09-14 17:06:31

6700

文章被收录于专栏：itclanCoderitclanCoder

很多网站都有切换主题的效果

比如如下所示

示例代码

<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>

其核心就是下面这行代码

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

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

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

暗黑模式使用到两个滤镜函数：invert、hue-rotate

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-07-11 08:00，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自 itclanCoder 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度