<meta name="color-scheme">

Baseline 已广泛支持

此功能已成熟,并可在多种设备和浏览器版本上运行。自 ⁨2022 年 1 月⁩起,它已在各种浏览器中可用。

<meta> 元素中 name 属性的 color-scheme 值,用于指示用户代理应为页面使用的建议颜色方案。如果指定了该属性,您将使用 <meta> 元素中的 content 属性来定义颜色方案,其值为有效的 CSS color-scheme 值。

主题颜色在文档级别上起作用,这与 CSS color-scheme 属性指定单个元素的首选和可接受的颜色方案的方式相同。<meta name="color-scheme"> 的主要用途是指示浅色和深色模式的兼容性和偏好顺序。例如,要指示文档偏好深色模式,但也支持浅色模式

html
<meta name="color-scheme" content="dark light" />

您可以使用 prefers-color-scheme CSS 媒体功能来适应当前的颜色方案。

用法说明

<meta name="color-scheme"> 元素具有以下附加属性:

content

具有 name=color-scheme<meta> 元素必须有一个 content 属性,该属性将颜色方案定义为 CSS color-scheme 值。content 属性可以是以下之一:

normal

文档不了解颜色方案,应使用默认调色板进行渲染。

lightdarklight darkdark light

文档支持的一种或多种颜色方案。多种颜色方案表示文档首选第一种方案,但如果用户偏好第二种方案,则第二种方案也是可接受的。多次指定相同的颜色方案与仅指定一次具有相同的效果。

仅浅色

指示文档支持浅色模式,具有浅色背景和深色前景。only dark是无效的,因为强制文档以深色模式渲染(当它不兼容时)可能导致内容不可读,并且所有主流浏览器在未另行配置的情况下都默认使用浅色模式。

media 可选

任何有效的媒体类型或查询。如果提供,当媒体查询匹配时,将向浏览器建议 content 属性中定义的文档颜色方案选项。这主要对 prefers-color-scheme CSS 媒体功能有用。

示例

使用颜色方案关键字

以下示例向浏览器指示该页面支持浅色和深色主题。使用浅色还是深色方案取决于用户偏好,例如操作系统级设置或浏览器设置。

html
<meta name="color-scheme" content="light dark" />

规范

规范
HTML
# meta-color-scheme

浏览器兼容性

另见