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 Anda yang memberi tahu browser warna yang akan digunakan untuk mewarnai elemen UI seperti kolom URL.

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

Warna tema
Warna tema

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

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"> — konfigurasi tingkat halaman akan digunakan, bukan nilai dalam manifes.

Cukup tambahkan atribut theme_color ke manifes dan tentukan warna HTML.

    "theme_color": "#2196F3"

Untuk melihat penerapannya, buka Airhorner — the world's best airhorn dan tambahkan ke layar utama Anda. Atau lihat manifes situs.

FAQ

  • Apakah ini berlaku jika situs saya tidak diluncurkan dari layar utama?
    Ya.
  • Apakah setelan ini akan berlaku untuk seluruh situs saya, misalnya saat pengguna hanya menjelajah?
    Kemungkinan tidak untuk saat ini, karena untuk melakukannya, browser harus mendownload manifes lebih sering dan saat ini merupakan aset prioritas rendah. Ini dimaksudkan untuk diuraikan saat pengguna menambahkan situs ke layar utama.