color-scheme

自 2022年2月 起，该功能适用于最新的设备和浏览器版本。此功能可能无法在较旧的设备或浏览器中工作。

color-scheme CSS 属性允许元素指示它可以舒适地呈现哪些颜色方案。

color-scheme: normal; //表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。
color-scheme: light; //表示可以使用操作系统亮色配色方案渲染元素。
color-scheme: dark; //表示可以使用操作系统深色配色方案渲染元素。
color-scheme: light dark; //同时支持两种、并允许浏览器根据用户的系统设置或浏览器设置自动选择适当的颜色模式
color-scheme: only light; //禁止用户代理覆盖元素的颜色方案。

/* 全局值 */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

操作系统颜色方案的常见选择为“亮色”和“暗色”，或“日间模式”和“夜间模式”。当用户选择其中一种颜色方案时，操作系统会对用户界面进行调整，包括表单控件、滚动条和 CSS 系统颜色的使用值。

mac举例：

prefers-color-scheme CSS 媒体特性

自 2020年1月 以来，它已在各浏览器上可用。prefers-color-scheme 用于检测用户是否有将系统的主题色设置为亮色或者暗色。

示例：

假设一个网页支持浅色和深色两种模式，你可以这样定义：

css
:root {
  color-scheme: light dark;
}

/* 其他样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: white;
  color: black;
}

//表示用户已告知系统他们选择使用暗色主题的界面。
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

详细说明：

1. 定义color-scheme:

   • 使用:root选择器来定义全局的color-scheme属性。
   • color-scheme: light dark; 告诉浏览器页面支持两种模式。

2. 样式规则:

   • 默认情况下，body背景色为白色，文字颜色为黑色。

3. 媒体查询:

   • 使用@media (prefers-color-scheme: dark) 媒体查询，当用户的系统或浏览器设置为深色模式时，应用相应的样式。
   • 在深色模式下，body背景色改为黑色，文字颜色改为白色。

通过使用color-scheme属性和媒体查询，可以轻松地为用户提供更好的视觉体验，自动适应他们的系统或浏览器设置。

mdn：color-scheme