没有为地址栏设置主题颜色

设置浏览器地址栏的主题，使其与品牌颜色保持一致 渐进式 Web 应用 (PWA) 的应用，可提供更具沉浸感的用户体验。

浏览器兼容性

自 2022 年 12 月起，支持为浏览器地址栏设置主题 基于 Android 的浏览器、Google Chrome 和 Microsoft Edge。请参阅 浏览器兼容性 获取更新。

Lighthouse 主题颜色审核如何失败

灯塔 标记未对地址栏应用主题的网页：

Lighthouse 审核结果显示地址栏的主题与页面颜色不符

如果 Lighthouse 在页面的theme-color Web 应用清单中的 HTML 和 theme_color 属性。

请注意，Lighthouse 不会测试这些值是否为有效的 CSS 颜色值。

如何为地址栏设置主题颜色

第 1 步：向您要塑造品牌的每个网页添加 theme-color 元标记

theme-color 元标记可确保 当用户以普通网页形式访问您的网站时。 将该标记的 content 属性设置为任何有效的 CSS 颜色值：

<!DOCTYPE html>
<html lang="en">
<head>
  …
  <meta name="theme-color" content="#317EFB"/>
  …
</head>
…

详细了解 Google 的 theme-color 元标记 在 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)