Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai mengenai bagaimana caranya menyesuaikan warna bar dengan mode dark pada website
Info: Oke sobat Icloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Mode Dark
Siapa sih di antara pemilik website yang tidak mengetahui mode dark, atau tidak menggunakan mode dark di dalam websitenya, pastinya seluruh pemilik website kebanyakan menggunakan mode dark sebagai salah satu fitur yang harus di miliki dan di tampilkan kepada pengunjung website tentunya
Addres Bar
Sedangakan pada fitur mode dark sendiri telah banyak perkembangan, ya selain tampilan dan warna dari mode dark tersebut tetapi kebanyakan mode dark yang di gunakan oleh website website tersebut hanya berfungsi pada halaman body websitenya aja, tidak dengan addres barnya
Info: So disini admin bakalan membahas mengenai bagaimana caranya membuat tampilan warna address bar mengikuti warna dari mode dark
Warna address Bar
Bagi kamu nih yang belum mengetahui apa itu addres bar? address bar jika di artikan berarti alamat bar yang letaknya di atas dan sebagai tempat untuk menampilkan dari alamat website, itulah yang disebut dengan address bar
Seperti yang kita ketahui bahwa untuk mengetahui warna address bar browser semisal pada crhome di dalam website kita, silahkan kamu meng nonaktifkan mode dark dari pengaturan browser kemudian lihat address bar ketika kamu menjelajahi suatu website, jika polos maka website tersebut tidak menggunakan warna custom pada address bar tersebut
Contoh Tampilan
Jika kamu penasaran dengan bagaimana kah hasil jika warna addres bar mengikuti mode dark website kita, silahkan klik tombol di bawah ini untuk memeriksa nya
Penting: Kamu harus menonaktifkan mode dark browser, kemudian aktifkan mode dark pada website dan lihat hasilnya, bagaimana sobat keren kan hehehe
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat atau mengubah warna address bar sesuai mode dark yang telah di pasang di dalam website ataupun blog, silahkan baca dan pelajari artikle ini hingga selesai ok
Kode Javascript
Silahkan salin kode javascript di bawah ini, kode javascript nya masih ori alias belum di enskripsi jadi kamu bisa mengedit kode javascript nya jika terjadi kesalahan, kemudian letakkan di atas kode </body>
<script>
/*<![CDATA[*/ document.querySelector('.isDrk').addEventListener('click', rahBrDrk);document.querySelector('.rahDrkBt').addEventListener('click', rahBrDrk);function rahBrDrk() {var cekdk = document.querySelector("#mainCont");if (cekdk.classList.contains('drK')) {document.querySelector('meta[name="theme-color"]').setAttribute("content", "#1e1e1e");document.querySelector('meta[name="msapplication-navbutton-color"]').setAttribute("content", "#1e1e1e");document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]').setAttribute("content", "#1e1e1e");}else {document.querySelector('meta[name="theme-color"]').setAttribute("content", "#de3535");document.querySelector('meta[name="msapplication-navbutton-color"]').setAttribute("content", "#de3535");document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]').setAttribute("content", "#de3535");}}rahBrDrk(); /*]]>*/
</script>Info: Jika sudah kemydian simpan template dan terus pelajari artikel ini karena belum selesai proses pemasangan nya
Sesuaikan class
Didalam kode javascript tersebut terdapat class CSS rahDrkBt yang berfungsi untuk mengaktifkan fitur mode dark pada bar addres bersamaan tombol untuk mengaktifkan mode darknya, perhatikan kode dibawah ini
<span data-text='Mode Malam' onclick='darkMode()'>
<i class='check'>
</i>
</span>Info: Kode di atas adalah tombol untuk mengaktifkan mode dark namun belum di tambahakam class CSS rahDrkBt untuk mengaktifkan mode dark pada addres bar
Nah di bawah ini adalah contoh ketika tombol untuk mengaktifkan mode dark pada addres bar telah di tambahkan
<span class='rahDrkBt' data-text='Mode Malam' onclick='darkMode()'>
<i class='check'>
</i>
</span>Info: So jadi intinya silahkan kamu tambahkan class rahDrkBt pada setiap tombol yang di gunakan untuk mengaktifkan mode dark
Penjelasan
Baiklah sobat icloudzer jika saat kamu memasang Script tersebut namun tidak berfungsi sebaiknya kamu periksa lagi kode javascript nya apakah sudah sesuai dengan setiap class di dalam template mu, karena setiap template terdapat class yang berbeda beda, misal kode #1e1e1e adalah warna mode dark, sedangkan #de3535 adalah warna addres bar ketika mode dark nonaktif untuk lebih lengkapnya silahkan lihat table di bawah ini
| No | Nama | Fungsi |
|---|---|---|
| 1 | drK | Fungsi dari kode drK adalah sebuah class untuk mengaktifkan fungsi mode dark |
| 2 | #mainCont | Fungsi dari kode #mainCont adalah class yang biasanya diletakkan pada tag <body |
| 3 | rahBrDrk | Adalah kode fungsi untuk menjalankan script |
| 4 | .rahDrkBt | Adalah kode untuk mengaktifkan mode dark pada addres bar |
