在开发移动端时，浏览器的非页面部分经常会出现与页面颜色不统一的情况，非常难看。
如左图
通过指定 meta、theme-color，如 <meta name="theme-color" content="#4285f4">
则可以设置该区域的主题色
效果如右图
还可以通过设置 media 属性，来匹配各种主题下的颜色，如
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
但需要注意，该属性有浏览器兼容性问题，目前最高支持移动端 chrome 80 / safari 15
developer.mozilla.org
如左图
通过指定 meta、theme-color，如 <meta name="theme-color" content="#4285f4">
则可以设置该区域的主题色
效果如右图
还可以通过设置 media 属性，来匹配各种主题下的颜色，如
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
但需要注意，该属性有浏览器兼容性问题，目前最高支持移动端 chrome 80 / safari 15
developer.mozilla.org
展开
评论
1
![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
![[赞]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_108.a6defc6.png)