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

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

原创

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

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

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

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

比如如下所示

示例代码

<template>
        <div class="css-switch-theme">
            <el-switch
                    @change="hanldeSwitchTheme"
                    v-model="themValue"
                    active-text="暗黑"
              &n