theme-color meta 标签详解
一行 HTML，就能给移动版 Chrome 的地址栏和已安装应用的标题栏着色。下面讲讲怎么用好它。
它究竟给什么着色
theme-color meta 标签告诉浏览器，紧挨着你页面的那部分界面（chrome）该用什么颜色。在移动版 Chrome 和部分 Android 浏览器上，那就是地址栏和状态栏。在已安装的 PWA 上，那是标题栏及其周边区域。在桌面浏览器上它通常不起作用，所以把它当成一个面向移动端和已安装应用的特性来对待。
取值是单个 CSS 颜色。用十六进制值最稳妥。挑一个能体现你品牌、同时又能让白色或浅色文字保持清晰可读的颜色，因为浏览器会在你的颜色之上绘制它自己的图标和文字。
为浅色和深色分设颜色
<meta
name="theme-color"
content="#ffffff"
media="(prefers-color-scheme: light)"
>
<meta
name="theme-color"
content="#0b0b0f"
media="(prefers-color-scheme: dark)"
>两个标签，各用一条 media 查询限定。浏览器会挑出与用户当前模式相符的那一个。如果你只想给两种模式用同一个颜色，去掉 media 属性即可。
让它与 manifest 保持一致
web app manifest 有自己的 theme_color 字段。这个值是 meta 标签在已安装应用中的对应物：它设定网站从主屏幕启动时所用的颜色。meta 标签管的是浏览器标签页，manifest 管的是已安装的窗口。
两者都要设置，并且设成同一个颜色，除非你有充分理由不这么做。不一致意味着你的地址栏在浏览器里是一个颜色，而安装后标题栏又是另一个颜色，看起来就像一个 bug。完整字段列表可参见「什么是 manifest.json」和 web app manifest 指南。
常见问题
theme-color 会改变我的 favicon 吗？
不会。theme-color 只给页面周围的浏览器界面着色。它对标签页里的 favicon、apple-touch-icon 或任何 manifest 图标都没有影响。那些是各自独立的图像文件。
为什么我的 theme-color 在桌面端不生效？
大多数桌面浏览器会忽略 theme-color。它是为移动版 Chrome、部分 Android 浏览器以及已安装的 PWA 窗口设计的。请在手机上或安装应用之后测试，而不是在桌面标签页里。
theme-color 应该与 manifest 的 theme_color 一致吗？
在几乎所有情况下都应该。meta 标签给浏览器标签页着色，manifest 的 theme_color 给已安装的应用窗口着色。取值不同会导致用户安装你的网站时颜色发生跳变。