未設定網址列的主題顏色

依漸進式網頁應用程式 (PWA) 的品牌顏色設定瀏覽器的網址列主題，可帶來更身歷其境的使用者體驗。

瀏覽器相容性

自 2022 年 12 月起，以 Android 為基礎的瀏覽器、Google Chrome 和 Microsoft Edge 都支援瀏覽器網址列的主題設定。如需相關更新，請參閱瀏覽器相容性。

Lighthouse 主題顏色稽核失敗情形

Lighthouse 會標記不適用於網址列主題的網頁：

Lighthouse 稽核功能顯示網址列不符合網頁的顏色主題

如果 Lighthouse 在網頁 HTML 中找不到 theme-color 中繼標記和網頁應用程式資訊清單屬性中的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 版 Chrome 的支援。theme-color

步驟 2：將 theme_color 屬性新增至網頁應用程式資訊清單

網頁應用程式資訊清單中的 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)