通过为浏览器的地址栏设置主题,使其与渐进式 Web 应用 (PWA) 的品牌颜色相匹配,可以提供更具沉浸感的用户体验。
浏览器兼容性
自 2022 年 12 月起,基于 Android 的浏览器、Google Chrome 和 Microsoft Edge 均支持为浏览器地址栏设置主题。如需了解相关更新,请参阅浏览器兼容性。
Lighthouse 主题颜色审核如何失败
Lighthouse 会对未将主题应用到地址栏的页面进行标记:
![Lighthouse 审查显示地址栏未采用页面颜色的主题](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=9&hl=sk)
如果 Lighthouse 在网页的 HTML 中找不到 theme-color
元标记,并且在 Web 应用清单中找不到 theme_color
属性,那么审查会失败。
请注意,Lighthouse 不会测试这些值是否为有效的 CSS 颜色值。
如何为地址栏设置主题颜色
第 1 步:向您想要塑造品牌的每个网页添加 theme-color
元标记
theme-color
元标记可确保当用户像正常网页一样访问您的网站时,地址栏会显示品牌标识。将标记的 content
属性设置为任何有效的 CSS 颜色值:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
如需详细了解 theme-color
元标记,请参阅 Google 的 Chrome 39(Android 版)对 theme-color
的支持。
第 2 步:将 theme_color
属性添加到您的 Web 应用清单中
Web 应用清单中的 theme_color
属性可确保当用户从主屏幕启动您的 PWA 时,地址栏会显示标示的品牌。与 theme-color
元标记不同,您只需在清单中定义一次此元标记。将该属性设置为任何有效的 CSS 颜色值:
{
"theme_color": "#317EFB"
…
}
```
The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.
## Resources
- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)