CSS：简单的深色模式

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《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：简单的深色模式》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！