Tidak menetapkan warna tema untuk kolom URL

Memberi tema kolom URL browser agar sesuai dengan warna merek Progressive Web App (PWA) Anda akan memberikan pengalaman pengguna yang lebih imersif.

Kompatibilitas browser

Mulai Desember 2022, penerapan tema kolom URL browser didukung di browser berbasis Android, Google Chrome, dan Microsoft Edge. Lihat Kompatibilitas browser untuk mengetahui update.

Bagaimana audit warna tema Lighthouse gagal

Lighthouse menandai halaman yang tidak menerapkan tema ke kolom URL:

Audit Lighthouse yang menampilkan kolom URL tidak bertema warna halaman

Audit akan gagal jika Lighthouse tidak menemukan tag meta theme-color di HTML halaman dan properti theme_color dalam manifes aplikasi web.

Perhatikan bahwa Lighthouse tidak menguji apakah nilai tersebut adalah nilai warna CSS yang valid.

Cara menetapkan warna tema untuk kolom URL

Langkah 1: Tambahkan tag meta theme-color ke setiap halaman yang ingin Anda beri merek

Tag meta theme-color memastikan kolom URL diberi merek saat pengguna mengunjungi situs Anda sebagai halaman web normal. Tetapkan atribut content tag ke nilai warna CSS yang valid:

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

Pelajari lebih lanjut tag meta theme-color dalam Dukungan Google untuk theme-color di Chrome 39 untuk Android.

Langkah 2: Tambahkan properti theme_color ke manifes aplikasi web Anda

Properti theme_color di manifes aplikasi web memastikan bahwa kolom URL diberi merek saat pengguna meluncurkan PWA dari layar utama. Tidak seperti tag meta theme-color, Anda hanya perlu menentukannya sekali, dalam manifes. Tetapkan properti ke nilai warna CSS yang valid:

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