## 单行 CSS 实现页面黑暗模式

本贴最后更新于 1331 天前,其中的信息可能已经时移世异

单行 CSS 实现 Dark Mode

主人公:filter

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。

code

通过设置滤镜翻转和色彩旋转,实现 Dark Mode:

html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

对于这种黑暗模式,我们将使用两个滤镜,即 inverthue-rotate

  1. 反转滤镜有助于反转应用程序的配色方案。 因此,黑色变成白色,白色变成黑色,所有颜色都类似。
  2. 色相旋转滤镜可以帮助处理所有其他非黑色和白色的颜色。将色相旋转 180 度,能够确保页面的颜色主题不会改变,而只是减弱其颜色。


这个方法的唯一缺点是,它还会反转应用程序中的所有图像。因此,需要将对所有图像添加相同的规则,以逆转效果:

html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}

同时还可以向 HTML 元素添加一个动画,以确保转换不会变得刻板:

html {
    transition: color 300ms, background-color 300ms;
}

demo

bz8sbl5x4bl4wclbi68z.gif

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    180 引用 • 446 回帖 • 4 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...