Cara Membuat Address Bar Mengikuti Darkmode

Hallo blogger pada kesempatan ini saya akan berbagi tutorial tentang  Cara Membuat Address Bar Mengikuti Darkmode mungkin dari teman - teman blogger masih kurang tahu atau mungkin memang tidak tahu cara membuat address bar mengikuti darkmode saat tombol darkmode di klik, mungkin teman - teman blogger hanya mengetahui cara membuat warna di address bar saja tapi kalo tombol darkmode di klik warna di address bar tidak berubah menjadi gelap.

Rasanya kurang srek di hati dan di mata jika warna address bar sangat kemilau tapi ketika kita beralih ke mode gelap warna di address bar tidak mengikuti dan tetap seperti itu, setelah saya otak atik akhirnya saya menemukan kode yang bisa merubah warna addres mengikuti atau support darkmode saat menggunakan darkmode.

Untuk percobaan saya menggunakan template dari Jagodesain seperti Median UI, iMagz, dan Fletro tapi jika kalian menggunakan template lain yang selain saya sebutkan tadi maka perlu penyesuaian agar kode tersebut dapat berfugsi dengan baik.

Untuk demonya bisa di lihat di bawah ini, lihat dari smartphone kalian terus klik darkmode

Demo

---

Cara Membuat Address Bar Mengikuti Darkmode

Disini saya menggunakan template dari jagodesain ( Median UI, iMagz, dan Fletro ) jika kalian menggunakan template lain kalian harus mengerti dan paham JavaScript agar kode dapat berfungsi dengan baik.

• Buka blog kalian lalu masuk ke edit html
• Copy kode di bawah ini dan letakan tepat di atas kode &lt;!--</body>--&gt;&lt;/body&gt; atau </body>

<script>/*<![CDATA[*/ 
var addrsDfClr = '#f89000'; //warna default
var addrsDrClr = '#1e1e1e'; // warna gelap

document.querySelector('.isDrk').addEventListener('click', addrsDrk); // tombol darkmode
document.querySelector('.mD').addEventListener('click', addrsDrk); // tombol darkmode

function addrsDrk() {
    var cekdk = document.querySelector("#mainCont"); // id tag body
    if (cekdk.classList.contains('drK')) { // cek apakah body memiliki class bernama (drK)
         // 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>

• Simpan template kalian dan lihat hasilnya.

Untuk melihat hasilnya kalian menggunakan Mobile / handphone jangan menggunakan PC / Laptop, karena address bar yang saya maksud adalah address bar versi mobile bukan versi dekstop.

Oke, sekian postingan tentang Cara Membuat Address Bar Mengikuti Darkmode yang saya bagikan kali ini, jika ada yang kurang faham silahkan berkomentar pada kolom komentar di bawah ini. terimakasih dan semoga bermanfaat.

Baca juga :

Go to Link