<meta name="theme-color">

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

<meta> 元素中 name 属性的 theme-color 值,表示用户代理应该用来自定义页面或周围用户界面的显示颜色的建议。如果指定了,您可以使用 <meta> 元素中的 content 属性,以 CSS <color> 值来定义主题颜色。

例如,要指示文档应将 cornflowerblue 用作主题颜色,请将 <meta> 设置为:

html
<meta name="theme-color" content="cornflowerblue" />

要设置主题颜色元数据适用的媒体,请包含具有有效媒体查询列表的 media 属性(请参阅 theme-color 媒体查询示例)。

用法说明

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

content

具有 name=theme-color<meta> 元素必须有一个 content 属性来定义主题颜色。content 属性的值如下:

<color>

一个有效的颜色值,例如十六进制、RGB、命名颜色等。

media 可选

任何有效的媒体类型或查询。如果提供,当媒体查询匹配时,content 属性中定义的文档主题颜色的选项将建议给浏览器。

示例

设置颜色值

考虑以下使用 <meta> 设置主题颜色的代码:

html
<meta name="theme-color" content="#4285f4" />

下图显示了此设置在 Chrome 上的 Android 移动设备上的效果:

Image showing the effect of using theme-color

图片来源:摘自 Icons & Browser Colors,由 Google 创建和共享,并根据 Creative Commons 4.0 Attribution License 的条款使用。

将媒体查询与 theme-color 结合使用

您可以在 media 属性中提供媒体类型或查询。然后,仅当媒体条件为真时,才会设置 theme-color。例如:

html
<meta
  name="theme-color"
  content="cornflowerblue"
  media="(prefers-color-scheme: light)" />
<meta
  name="theme-color"
  content="dimgray"
  media="(prefers-color-scheme: dark)" />

规范

规范
HTML
# meta-theme-color

浏览器兼容性

另见

  • <meta> name 属性 color-scheme
  • color-scheme CSS 属性
  • prefers-color-scheme 媒体查询