Skip to content

Latest commit

 

History

History
42 lines (30 loc) · 2.19 KB

仅 CSS 添加暗黑模式.md

File metadata and controls

42 lines (30 loc) · 2.19 KB

仅 CSS 添加暗黑模式

我们只需要添加以下 CSS 即可支持暗黑模式：

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

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

这里还使用到了 filter 的两个函数：invert 和 hue-rotate。

  • invert — 反转元素和图像的颜色。
  • hue-rotate — 帮助我们处理所有其他非黑色和白色的颜色。将色调旋转 180 度，我们确保应用的颜色主题不会改变，而只是减弱其颜色。

因为我们应用于整个文档，所以它会反转所有图像和视频。如果不想给图像、视频应用暗黑模式，可以添加：

img,
video {
  filter: invert(1) hue-rotate(180deg);
}

它将对所有图像和视频添加相同的规则，以逆转效果。

更多资料

如果你想要获取系统是否处于暗黑模式下，有两种方式可以做到，可以查看检测暗模式。

推荐一些关于暗黑模式的文章：