cara membuat address bar support darkmode

membuat address bar ikut gelap saat dimode gelap dengan javascript

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat address bar blog support darkmode atau mode gelap.

tutorial ini di reguest oleh Yadi Hidayat melalui komentar di salah satu postingan blog ini seminggu yang lalu, karena saya merasa cukup menarik jadi saya mencoba membuatnya.

jika kalian menggunakan template buatan jagodesain seperti median-ui, fletro dan imgaz di versi terbarunya kalian tidak perlu mengubah apapun, namun jika kalian menggunakan template lain maka di perlukan penyesuaian agar dapat berfungsi.

untuk demonya kalian bisa coba klik icon darkmode pada blog ini dan tentunya harus melalui mobile ya bukan pc, karena yang kita ubah warnanya adalah address bar pada browser di mobile.

Cara Membuat Address Bar Support Darkmode

jika kamu menggunakan template berbedah perlu melakukan penyesuaian agar dapat berfungsi, pengetahuan js dasar di perlukan di sini

silakan salin script di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; , jika sudah jangan lupa untuk klik simpan.

<script>/*<![CDATA[*/ 
/* javascript membuat address bar support darkmode by wendycode.com */
/* pengguna template selain median-ui, fletro, imgaz perlu menyesuaikan */
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>

ok jadi sekian cara membuat address bar blog support darkmode yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.