theme-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

<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
# meta-theme-color

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
theme-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.