bergabung di grup telegram kami

cara membuat address bar support darkmode

cara membuat address bar support darkmode

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.

Baca juga :
tutorial blogger

6 komentar



image quote pre code
  1. Wowww! Keren gan ๐Ÿ‘๐Ÿ˜Ž!!! Gw muter-muter beberapa hari ga nemu ๐Ÿคฃ, akhirnya ๐Ÿ˜Œ, thanks gan ๐Ÿค
    1. sama2 gan
  2. script nya berfungsi keren sih...tp klo pas aktifin mode gelap terus di refresh, warna address nya balik lagi ke warna tema (terang), bukan ikutin warna dr tema mode gelap
    1. aman kok mas, walau di refersh tetap gelap, ini uda saya update lagi sebelumnya cuma ubah 1 meta tag theme-color, sekarang saya ubah ketiga meta tag nya silakan di coba kembali
  3. Plis tambahin script LocalStorage gan, biar kalo di reload gak balik ke warna awal. Semoga di acc :) - Terimakasih
    1. apakah blog ini balik ke warna asli setelah di refersh? atau hanya punya kamu saja?
© 2020 - Wendy Code

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english