color-scheme CSS 属性允许元素指示它可以轻松呈现的配色方案。
操作系统配色方案的常见选择是“亮”和“暗”，或者是“白天模式”和“夜间模式”。当用户选择其中一种配色方案时，操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: unset;color-scheme 属性的值必须是以上关键字之一。
normal ：表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。
light ：表示可以使用操作系统亮色配色方案渲染元素。
dark ：表示可以使用操作系统深色配色方案渲染元素。
要将整个页面配置为使用用户的配色方案首选项，请在 :root 元素上指定 color-scheme 。
:root {
color-scheme: light dark;
}一旦操作系统亮色配色方案发生变化，它就会自动从样式表中应用相应的颜色方案，而无需编写其他样式或媒体查询。
操作系统通常允许用户使用选择的颜色方案覆盖其系统颜色。则浏览器的默认样式将遵循这些操作系统设置。
通过在网页HTML中的＜head＞中添加＜meta name＝“color scheme”＞标记，我们可以获得相同的作用：
<head>
<meta name="color-scheme" content="dark light">
</head>不需要在HTML和CSS中都指定颜色方案，但在样式表由于某种原因无法加载的情况下，它可能很方便。这样，即使CSS不可用，页面仍然会选择两种颜色方案。
如果您试图在HTML元标记和CSS属性之间进行选择，则可能倾向于HTML。HTML立即可用。另一方面，CSS方法要求样式表在应用属性之前下载，并且需要花费时间，这可能会导致颜色主题出现轻微错误。
浏览器兼容性
1688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
