深色模式是一种显示选项，可将网站或应用程序的颜色主题从浅色背景（带有深色文本）切换为深色背景（带有浅色文本）。这种模式因其在减轻弱光环境下的眼睛疲劳、节省 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()，并且所有主流浏览器都支持它：

协同养育操作系统

协同养育操作系统（Co-Parenting OS）— 离异家庭专业协同养育支持系统。12模块覆盖接送管理、成长记忆库、孩子观察站、亲子关系粘合剂、共同挑战中心、情绪冲突观察、父母成长、成长档案馆、成长阶段引擎、风险预警、驾驶舱、被恶意攻击急救包。当用户涉及离异家庭育儿、协同养育、抚养探视、接送安排、孩子成长记录、亲子关系、离异冲突、被恶意攻击、前任矛盾等话题时触发。

下载

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

:root {
  color-scheme: light dark;
}

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

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