大厂面试题每日一题
极客时间返利平台，你可以在上边通过山月的链接购买课程，并添加我的微信 (shanyue94) 领取返现。
山月训练营之面试直通车 服务上线了，从准备简历、八股文准备、项目经历准备、面试、面经、面经解答、主观问题答复、谈薪再到入职的一条龙服务。

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

更多描述

可参考以下文章:

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

Issue

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

Author

回答者: shfshanyue (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

← 27. 介绍 CSS 隐藏页面中某个元素的几种方法 →