Membuat Dark Mode Sederhana Diwebsite Kalian + Sorce Code + 2022

Hallo teman - teman semua, kali ini saya akan memberikan cara bagaimana membuat dark mode sederhana di website kalian, oke cuy yang pertama kalian siapin dulu foldernya bebas kalian mau taruh di mana, kalo kalian sudah membuat foldernya kalian langsung bukak aja di Editor kesayangan kalian masing - masing, di sini saya menggunakan editor visual studio code.

Langkah pertama setelah kalian buat foldernya dan sudah kalian bukak di editor kalian masing - masing kalian buat file index.html, seperti contoh di bawah ini

Setelah kalian buat index.html kalian langsung saja buat kerangkanya html dan link cdn dari font awesome kalian bisa kunjungi disisni https://cdnjs.com/libraries/font-awesome , seperti di contoh bawah ini

Setelah itu kalian bisa buat paragraf <p> dan judul yang ingin kalian buat </p> dan disini kalian juga buat Button dan di dalam button ini kalian bisa beri icon matahari dari font awesome untuk tampilan terangnya, bisa kalian lihat contoh di bawah ini

Kalo kalian sudah membuat tag htmlnya kalian bisa langsung membuat tampilan tag yang sudah di buat.nah di sini kalian bisa menghubungkan tag htmlnya dengan css di bawah head, seperti contoh di bawah ini

Nah root itu adalah pshadow class yang bisa membuat variabel di dalam css.disini saya membuat variabel root dengan dua warna primary putih dan secondary hitam, di sini saya juga buat class dark-mode pengembalian dari si root, di situ saya membuat bodynya agar posisinya ke tengah dan heightnya 100vh agar setara dengan halamanya, nah di situ saya membuat paragrafya agar fontnya lebih tebal dan juga saya menyetyiling si button nya juga dan iconya juga agar lebih besar, dan hasilnya seperti ini

Nah dan untuk logikanya sendiri disini disini saya membuat script contohnya seperti ini

Nah di situ saya membuat 2 variabel button dan icon dan juga saya panggilsi idnya button dan icon dengan document.getElementById("button")dan begitu juga dengan si iconya juag,nah setelah itu saya membuat tombol, ketika button di click kalo buttonini mengandung dark mode maka saya arahkan ke css yang sudah buat dark-modedengan document.body.classList.toggle("dark-mode").nah dan begitu juga denagn if ketika mengandung dark mode maka si iconyaakan berubah menjadi bulan begitu juga dengan else ketika sudah tidak mengandung dark mode maka si iconya ini akan berubah menjadi matahari.

Nah ukup begitu teman - teman sangat mudah kan, dan semoga tutorial ini bisa membantu kalian dan bermanfaat.