CSS：简单的深色模式

深色模式是一种显示选项，可将网站或应用程序的颜色主题从浅色背景（带有深色文本）切换为深色背景（带有浅色文本）。这种模式因其在减轻弱光环境下的眼睛疲劳、节省 oled 屏幕设备的能源以及提供传统灯光主题的视觉吸引力替代方案等方面的优势而越来越受欢迎。
通常，您可以在 3 种模式之间切换：深色、浅色和系统主题设置。

老办法

到目前为止，我们已经使用了prefers-color-scheme css媒体功能：

prefers-color-scheme css 媒体功能用于检测用户是否请求浅色或深色主题。用户通过操作系统设置（例如浅色或深色模式）或用户代理设置来表明他们的偏好。

@media (prefers-color-scheme: dark) {
  .post {
    background: #753;
    color: #dcb;
  }
}

@media (prefers-color-scheme: light) {
  .post {
    background: #bcd;
    color: #334;
  }
}

如您所见，我们需要维护 2 个主题，每种模式一个。
在大规模应用中采用这种方法可能很困难。

新的更好的方法

幸运的是，css 引入了一个新属性，让我们的生活更轻松，light-dark()，并且所有主流浏览器都支持它：

light-dark() css 函数可以为属性设置两种颜色 - 通过检测开发人员是否设置了浅色或深色配色方案或用户是否请求浅色或深色主题来返回两种颜色选项之一 -无需将主题颜色包含在首选颜色方案媒体功能查询中。

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#292524, #f5f5f4);
  background-color: light-dark(#f5f5f4, #292524);
}

只需在我们希望在模式之间切换的每个元素上使用 light-dark() 属性，就是这样！

以上就是CSS：简单的深色模式的详细内容，更多请关注慧达安全导航其它相关文章！