Script Membuat Otomatis Address Bar Browser Android Menjadi Dark Mode

---

Mode gelap (dark mode) menjadi fitur yang sangat diminati karena memberikan tampilan yang lebih nyaman bagi mata, terutama saat digunakan dalam kondisi minim cahaya. Salah satu elemen yang sering diabaikan dalam mode gelap adalah address bar pada browser. Dalam artikel ini, kita akan membahas cara membuat address bar pada browser berubah menjadi dark mode menggunakan HTML, CSS, dan JavaScript.

Keuntungan

Selain bikin tampilan lebih keren, mode gelap juga punya banyak manfaat buat mata dan baterai HP. Nah, kalau kamu punya website, ada cara biar address bar di browser Android ikut jadi dark mode juga. Gimana caranya? Tinggal pasang script sederhana! Berikut beberapa keuntungannya :

1. Mata Jadi Lebih Nyaman
   
   • Cahaya putih dari layar HP bisa bikin mata cepat lelah, apalagi kalau dipakai lama.
   • Dark mode mengurangi silau, jadi lebih nyaman buat mata, terutama kalau browsing malam-malam.


2. Baterai Lebih Awet, kalo HP kamu pakai layar OLED atau AMOLED, warna hitam bakal bantu hemat baterai karena pikselnya mati. Jadi, semakin gelap tampilan website, makin hemat daya!


3. Tampilan Lebih Keren & Profesional
   
   • Website yang sinkron sama dark mode HP kelihatan lebih estetik dan elegan.
   • Pengalaman pengguna (UX) juga jadi lebih konsisten dan enak dipandang.


4. Fokus ke Konten, Bukan ke Silau Layar
   
   • Latar belakang gelap bikin tulisan lebih gampang dibaca.
   • Mata nggak cepat capek, jadi bisa baca atau scroll lebih lama tanpa pusing.


5. Bisa Bantu SEO (Sedikit Banyak)
   
   • Google makin memperhatikan kenyamanan pengguna.
   • Website yang lebih ramah buat mata dan nyaman dilihat bisa kasih nilai plus buat ranking.

Cara Kerja

Address bar warna ditentukan oleh meta tag atau CSS theme-color. Dengan mengganti warna pada elemen ini, kita dapat mengubah tampilan address bar menjadi dark mode sesuai dengan preferensi pengguna.

Implementasi

1. Menggunakan Meta Tag theme-color
   
   Beberapa browser seperti Google Chrome Android dan browser Edge untuk Android OS mendukung perubahan warna address bar menggunakan meta tag dan javascript berikut ini :
   
   
   <script>/*<![CDATA[*/
   /* javascript membuat address bar support darkmode */
   var addrsDfClr = '#f89000'; //warna terang
   var addrsDrClr = '#1e1e1e'; // warna gelap
   
   function addrsDrk() {
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { var cekdk = e.matches ? "dark" : "light"; });
   if (cekdk == 'dark') { // jika ada ubah warnanya
   document.querySelector('meta[name="theme-color"]').setAttribute("content", addrsDrClr);
   document.querySelector('meta[name="msapplication-navbutton-color"]').setAttribute("content", addrsDrClr);
   document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]').setAttribute("content", addrsDrClr);
   } else {
   // jika tidak kembalikan ke warna asli
   document.querySelector('meta[name="theme-color"]').setAttribute("content", addrsDfClr);
   document.querySelector('meta[name="msapplication-navbutton-color"]').setAttribute("content", addrsDfClr);
   document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]').setAttribute("content", addrsDfClr);
   }
   }
   addrsDrk();
   /*]]>*/</script>
   
   


2. Penjelasan Kode
   
   • var addrsDrClr = '#1e1e1e'; variabel script yang digunakan untuk mengatur warna address bar.
   
   
   • Warna adress bar browser disesuaikan secara otomatis dengan mode system yang digunakan oleh perangkat user.
   
   
   • JavaScript digunakan untuk mengubah warna address bar secara dinamis dengan mengubah nilai content pada meta tag theme-color.
   
   Dengan menerapkan teknik ini, kita dapat meningkatkan pengalaman pengguna dengan memberikan tampilan yang lebih nyaman dan estetis, terutama dalam mode gelap. Implementasi ini cukup sederhana namun memberikan dampak yang signifikan bagi kenyamanan pengguna saat berselancar di website Anda.

Artikel lainnya mengenai script dark mode bisa dibaca pada artikel yang berjudul [SCRIPT] Auto Dark Mode untuk Website dan Blog.

Demikian artikel blog tentang Script Membuat Otomatis Address Bar Chrome Android Menjadi Dark Mode terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

script code here...