几行 CSS 实现网站暗黑模式

1,363 阅读1分钟
html[theme='dark-mode'] {
  filter: invert(1) hue-rotate(180deg);
  img {
    filter: invert(1) hue-rotate(180deg);
  }
}

html {
  transition: color 300ms, background-color 300ms;
}
  1. 整个网站反转颜色
html[theme='dark-mode'] {
  filter: invert(1) hue-rotate(180deg);
}

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

对于暗黑模式,将使用两个 filter :invert 和 hue-rotate

invert:反转配色。黑色变为白色,白色变为黑色,所有颜色都是如此

hue-rotate:帮助我们处理所有其他非黑色和白色的颜色。将色相旋转180度,我们确保应用程序的颜色主题不会改变,而只是减弱其颜色。

  1. 再次反转图片的颜色

这个方法有个问题,它还会反转图像的颜色。所以,还要对所有图像添加相同的规则,以逆转效果。

html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}
  1. 还可以添加过渡效果
html {
    transition: color 300ms, background-color 300ms;
}

最后,只需给你的 html 添加属性 theme,并赋值 dark-mode 就能应用这个样式了。而要实现切换效果只需 toggle 这个属性的值。当然你也可以用到任意的元素上,不一定是 html,这只是一个 css 规则。