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