meta 标签的 media 属性如何配合 prefers-color-scheme 实现深色模式
网页可以通过在 meta 标签中设置 media 属性，配合 prefers-color-scheme 媒体查询，让浏览器仅在特定模式下应用主题色。
设置不同模式的主题色
网页开发者可以在 HTML 的 head 区域放置两个 meta 标签，分别定义浅色和深色模式下的主题色。例如，第一个标签设置浅色模式下的主题色为矢车菊蓝，第二个标签设置深色模式下的主题色为暗灰色。这种写法利用了 media 属性来区分应用主题色的条件，确保浏览器根据当前系统的颜色偏好来选择合适的颜色值。
具体实现时，需要在 meta 标签的 media 属性中写入媒体查询条件。当媒体查询条件为真时，浏览器才会应用 content 属性中定义的颜色值。这种机制允许网页针对不同的显示环境提供定制化的视觉体验，而无需编写额外的 JavaScript 代码来检测系统偏好。
媒体查询条件的生效逻辑
媒体查询条件通常使用 prefers-color-scheme 来判断用户是否启用了深色模式。如果用户设备处于浅色模式，浏览器会匹配到 media 为 (prefers-color-scheme: light) 的标签，并应用对应的颜色值。反之，如果设备处于深色模式，浏览器则会匹配到 media 为 (prefers-color-scheme: dark) 的标签，并应用对应的颜色值。
这种基于媒体查询的设置方式具有动态响应的特性。当用户在系统设置中切换颜色模式时，网页的主题色也会随之改变。需要注意的是，媒体查询必须是一个有效的媒体类型或查询列表，否则浏览器将忽略该 meta 标签的设置。
检查主题色是否生效的方法
要验证主题色是否正确设置，可以在移动设备的浏览器中打开网页，并检查地址栏或状态栏的颜色是否与网页的主题色一致。在 Android 设备的 Chrome 浏览器中，可以通过查看页面顶部的颜色变化来确认主题色是否生效。
如果主题色未生效，可以检查 meta 标签的语法是否正确，特别是 media 属性的值是否符合媒体查询规范。确保 content 属性中的颜色值是有效的 CSS 颜色值，并且 meta 标签位于 HTML 文档的 head 区域内。
主题色对页面显示的影响
主题色主要用于定制网页在移动设备上的显示效果，例如地址栏、状态栏或浏览器界面的背景色。当主题色设置正确时，网页的视觉风格会与系统颜色方案保持一致，提升用户体验。例如，在深色模式下，网页的主题色会与深色背景融合，减少视觉疲劳。
主题色的应用范围取决于浏览器的实现。虽然 MDN 文档提到了在 Chrome on Android 设备上的效果，但不同浏览器对主题色的支持程度可能不同。因此，建议在多种设备和浏览器上测试主题色的显示效果，以确保跨平台的一致性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。