Không đặt màu giao diện cho thanh địa chỉ

Sắp xếp thanh địa chỉ của trình duyệt theo giao diện để phù hợp với màu thương hiệu của Ứng dụng web tiến bộ (PWA) mang lại trải nghiệm người dùng sống động hơn.

Khả năng tương thích với trình duyệt

Kể từ tháng 12 năm 2022, tuỳ chỉnh giao diện cho thanh địa chỉ của trình duyệt sẽ được hỗ trợ trên Các trình duyệt trên Android, Google Chrome và Microsoft Edge. Xem Khả năng tương thích với trình duyệt để được cập nhật.

Cách không kiểm tra được màu sắc giao diện Lighthouse

Lighthouse gắn cờ các trang không áp dụng giao diện cho thanh địa chỉ:

Thông tin kiểm tra trên Lighthouse cho thấy thanh địa chỉ không theo chủ đề về màu sắc của trang

Quá trình kiểm tra sẽ không thành công nếu Lighthouse không tìm thấy thẻ meta theme-color trong thẻ HTML và thuộc tính theme_color trong tệp kê khai ứng dụng web.

Lưu ý Lighthouse không kiểm tra xem các giá trị có phải là giá trị màu CSS hợp lệ hay không.

Cách đặt màu giao diện cho thanh địa chỉ

Bước 1: Thêm thẻ meta theme-color vào mọi trang mà bạn muốn gắn thương hiệu

Thẻ meta theme-color đảm bảo rằng thanh địa chỉ được gắn thương hiệu khi người dùng truy cập vào trang web của bạn như một trang web thông thường. Đặt thuộc tính content của thẻ thành giá trị màu CSS bất kỳ hợp lệ:

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

Tìm hiểu thêm về thẻ meta theme-color trong Hỗ trợ dành cho theme-color trong Chrome 39 dành cho Android.

Bước 2: Thêm thuộc tính theme_color vào tệp kê khai ứng dụng web

Thuộc tính theme_color trong tệp kê khai ứng dụng web của bạn đảm bảo rằng địa chỉ thanh sẽ được gắn thương hiệu khi người dùng chạy PWA của bạn từ màn hình chính. Không giống như thẻ meta theme-color, bạn chỉ cần để xác định URL này một lần, trong tệp kê khai. Đặt thuộc tính thành bất kỳ giá trị màu CSS hợp lệ nào:

{
  "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)