网页中 meta 标签的 color-scheme 属性如何指定颜色方案
网页中 meta 标签的 color-scheme 属性通过 content 值声明页面支持的颜色模式。
content 属性的有效取值有哪些
meta 标签的 color-scheme 属性必须包含一个 content 属性来定义颜色方案。该属性值必须是有效的 CSS color-scheme 值。有效的取值包括 normal、light、dark 以及它们的多值组合，如 light dark 或 dark light。normal 表示文档未指定颜色方案，应使用默认调色板渲染。light 表示仅支持浅色模式，dark 表示仅支持深色模式。多值组合表示文档首选第一个方案，但如果用户偏好第二个方案，则接受该方案。
在设置 content 值时，可以指定一个或多个颜色方案。例如，content 属性设置为 dark light 时，表示文档首选深色模式，但也支持浅色模式。如果指定了相同的颜色方案多次，其效果与指定一次相同。需要注意的是，only dark 是无效的值，因为强制文档在不适用的深色模式下渲染可能导致内容不可读，所有主要浏览器在未配置的情况下默认使用浅色模式。
如何通过 content 值表达浅色与深色模式的偏好顺序
通过在 content 属性中列出多个颜色方案，可以表达文档对浅色和深色模式的偏好顺序。第一个列出的方案是文档首选的方案，后续列出的方案是可接受的备选方案。例如，content 属性设置为 dark light 时，表示文档首选深色模式，但如果用户偏好浅色模式，浏览器也会接受并渲染浅色模式。这种机制允许开发者根据内容特性指定最合适的颜色方案。
如果文档仅支持一种颜色模式，可以在 content 属性中指定 only light 或 only dark。例如，content 属性设置为 only light 时，表示文档仅支持浅色模式，具有浅色背景和深色前景颜色。需要注意的是，only dark 是无效的，因为强制深色模式可能导致内容不可读。浏览器通常会根据用户设置或默认配置来决定最终使用的颜色方案。
如何验证 meta 标签的 color-scheme 属性是否生效
验证 meta 标签的 color-scheme 属性是否生效，可以通过检查浏览器是否根据指定的颜色方案调整页面渲染。首先，在网页的 head 部分添加 meta 标签，例如 <meta name='color-scheme' content='dark light' />。然后，使用浏览器的开发者工具检查页面的计算样式或媒体查询。如果浏览器支持该属性，当用户切换系统的浅色或深色模式时，页面样式应相应调整。
另一种验证方法是使用 CSS 的 prefers-color-scheme 媒体查询。在样式中添加 @media (prefers-color-scheme: dark) { ... } 规则，并检查页面在深色模式下的显示效果。如果 meta 标签的 color-scheme 属性正确设置，浏览器应优先使用指定的颜色方案，并触发相应的媒体查询。如果页面样式未调整，可能是浏览器不支持该属性或 content 值设置不正确。
设置 color-scheme 属性时的注意事项
在设置 meta 标签的 color-scheme 属性时，必须确保 content 值是有效的 CSS color-scheme 值。无效的值可能导致浏览器忽略该属性或使用默认调色板。例如，content 属性设置为 only dark 是无效的，因为强制深色模式可能导致内容不可读。浏览器通常会根据用户设置或默认配置来决定最终使用的颜色方案。
此外，color-scheme 属性主要用于指示文档对颜色方案的兼容性和偏好顺序。它不会自动应用样式，而是建议用户代理使用指定的颜色方案。开发者仍需使用 CSS 的 color-scheme 属性或 prefers-color-scheme 媒体查询来实际调整页面样式。确保 content 值与页面的实际设计相匹配，以避免内容在深色或浅色模式下显示异常。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。