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 浏览器造成的影响。
图片来源:《图标和浏览器颜色》, 由 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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.