极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

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

Issue

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

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

Author

回答者: CsongL (opens new window)

实现方式:

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 new window) 如何实现网页 dark-model (opens new window)

Last Updated: 2/23/2022, 11:56:07 AM