theme-color

<meta> 中 name 属性的值为 theme-color 时，用户的浏览器将根据所设定的建议颜色来改变用户界面。倘若设置了该值，则 content 属性必须包含有效的 CSS <color> 值。

示例

html

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

下图展示了上方所示的 <meta> 元素对于 Android 端 Chrome 浏览器造成的影响。

示 theme-color 对浏览器的影响

图片来源：《图标和浏览器颜色》, 由 Google 创作并经署名 4.0 国际 (CC BY 4.0) 许可证共享。

你可以用 media 来查询一个媒体类型，如果条件符合则使用对应颜色。比如：

html

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

规范

Specification
HTML Standard # meta-theme-color

浏览器兼容性

BCD tables only load in the browser