Menerapkan tema kolom URL browser agar cocok dengan warna merek Progressive Web App (PWA) Anda 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 mendapatkan info terbaru.
Bagaimana audit warna tema Lighthouse gagal
Mercusuar menandai halaman yang tidak menerapkan tema ke kolom URL:
Audit gagal jika Lighthouse tidak menemukan tag meta theme-color di bagian
HTML dan properti theme_color di manifes aplikasi web.
Perhatikan bahwa Lighthouse tidak menguji apakah nilainya 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 bahwa kolom URL diberi merek saat
pengguna mengunjungi situs Anda
seperti halaman web biasa.
Setel 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 di
Dukungan 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 alamat
adalah merek saat pengguna meluncurkan PWA Anda dari layar utama.
Berbeda dengan tag meta theme-color, Anda hanya perlu
untuk 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)