<meta name="color-scheme">
<meta>
元素中 name
属性的 color-scheme
值,用于指示用户代理应为页面使用的建议颜色方案。如果指定了该属性,您将使用 <meta>
元素中的 content
属性来定义颜色方案,其值为有效的 CSS color-scheme
值。
主题颜色在文档级别上起作用,这与 CSS color-scheme
属性指定单个元素的首选和可接受的颜色方案的方式相同。<meta name="color-scheme">
的主要用途是指示浅色和深色模式的兼容性和偏好顺序。例如,要指示文档偏好深色模式,但也支持浅色模式
<meta name="color-scheme" content="dark light" />
您可以使用 prefers-color-scheme
CSS 媒体功能来适应当前的颜色方案。
用法说明
<meta name="color-scheme">
元素具有以下附加属性:
content
-
具有
name=color-scheme
的<meta>
元素必须有一个content
属性,该属性将颜色方案定义为 CSScolor-scheme
值。content
属性可以是以下之一:normal
-
文档不了解颜色方案,应使用默认调色板进行渲染。
light
、dark
、light dark
、dark light
-
文档支持的一种或多种颜色方案。多种颜色方案表示文档首选第一种方案,但如果用户偏好第二种方案,则第二种方案也是可接受的。多次指定相同的颜色方案与仅指定一次具有相同的效果。
仅浅色
-
指示文档仅支持浅色模式,具有浅色背景和深色前景。
only dark
是无效的,因为强制文档以深色模式渲染(当它不兼容时)可能导致内容不可读,并且所有主流浏览器在未另行配置的情况下都默认使用浅色模式。
media
可选-
任何有效的媒体类型或查询。如果提供,当媒体查询匹配时,将向浏览器建议
content
属性中定义的文档颜色方案选项。这主要对prefers-color-scheme
CSS 媒体功能有用。
示例
使用颜色方案关键字
以下示例向浏览器指示该页面支持浅色和深色主题。使用浅色还是深色方案取决于用户偏好,例如操作系统级设置或浏览器设置。
<meta name="color-scheme" content="light dark" />
规范
规范 |
---|
HTML # meta-color-scheme |
浏览器兼容性
加载中…
另见
color-scheme
CSS 属性prefers-color-scheme
媒体查询