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

最新推荐文章于 2024-02-03 12:35:25 发布

原创

最新推荐文章于 2024-02-03 12:35:25 发布 · 676 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

本文介绍了如何使用CSS的filter属性结合CSS变量，轻松实现网站主题在黑白色之间的切换。核心代码是运用了`filter: invert()`和`hue-rotate(180deg)`，这两个函数分别用于黑白反转和色相旋转，确保色调不变。通过这种方式，可以方便地创建具有视觉对比的主题切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

比如如下所示

示例代码

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

最低0.47元/天解锁文章