<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">
元素具有以下附加属性:
示例
设置颜色值
考虑以下使用 <meta>
设置主题颜色的代码:
html
<meta name="theme-color" content="#4285f4" />
下图显示了此设置在 Chrome 上的 Android 移动设备上的效果:
图片来源:摘自 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
媒体查询