如何使用 CSS 实现网站的暗黑模式 (Dark Mode)

更多描述 可参考以下文章:

1. Dark mode in 5 minutes, with inverted lightness variables (opens in a new tab)

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 375 (opens in a new tab)

Author 回答者: shfshanyue (opens in a new tab)

@media (prefers-color-scheme: dark) {
  :root {
  }
}

Author 回答者: CsongL (opens in a new tab)

实现方式：

html[theme="dark-model"] {
  filter: invert(1) hue-rotate(180);
  transition:
    color 300ms,
    background-color 300ms; /*过渡动画*/
}

解释： css 的 filter属性 是将用于图片上的过滤，颜色变化等图形效果应用与元素上， 上面所使用到的 invert 可以用来反转应用程序的颜色; hue-rotate 是用来改变图像上的应用色颜色 通过invert(1)将白色变成黑色，那么为了适配颜色的变化，网页上的图像的颜色应该也做一个改变，这个改变就是通过hue-rotate(180edg)来实现的 filter属性 其他著名的应用还有: _ blur() 模糊图像 _ opacity() 图像透明程度 _ drop-shadow() 对图像应用阴影效果 _ ...

Reference

MDN Docs (opens in a new tab) 如何实现网页dark-model (opens in a new tab)