Menggunakan manifes aplikasi web untuk menentukan warna tema seluruh situs

Chrome memperkenalkan konsep warna tema untuk situs Anda pada tahun 2014. Warna tema adalah petunjuk dari halaman web yang memberi tahu browser warna apa yang harus ditambahkan untuk menambahkan tint elemen UI seperti kolom URL.

Misalnya, di bawah ini adalah situs ini dengan dan tanpa menerapkan warna tema.

Warna tema
Warna tema

Masalahnya, Anda harus menentukan warna tema di setiap halaman dan jika Anda memiliki situs atau situs lama yang besar, membuat banyak perubahan pada seluruh situs tidak selalu mudah dilakukan.

Mulai Chrome 46 (Beta September 2015), menambahkan atribut theme_color ke manifes akan otomatis menerapkan warna ke setiap halaman yang dikunjungi pengguna di domain Anda saat situs diluncurkan dari layar utama.

Jika halaman Anda sudah memiliki tag meta warna tema — misalnya <meta name="theme-color" content="#2196F3"> — maka konfigurasi tingkat halaman akan digunakan sebagai ganti nilai dalam manifes.

Cukup tambahkan atribut theme_color ke manifes dan tentukan warna HTML.

    "theme_color": "#2196F3"

Untuk melihat penerapannya, kunjungi Airhorner — terompet terbaik di dunia dan tambahkan ke layar utama Anda. Atau lihat manifes situs.

FAQ

  • Apakah hal ini berlaku jika situs saya tidak diluncurkan dari layar utama?
    Ya.
  • Apakah hal ini akan berlaku untuk seluruh situs saya, misalnya jika pengguna hanya menjelajah?
    Hal ini tidak mungkin untuk saat ini. Hal tersebut berarti browser harus lebih sering mendownload manifes dan saat ini adalah aset prioritas rendah. URL ini ditujukan untuk diuraikan saat pengguna menambahkan situs ke layar utama.