Halo Sobat Jurnal Coding! Selamat datang di Proyek Praktis yang paling ditunggu-tunggu!

Coba perhatikan baik-baik desain keseluruhan website Jurnal Coding yang sedang kamu baca ini. Website ini didominasi oleh warna gelap (Dark Mode) yang sangat pekat, dipadukan dengan aksen kaca buram dan teks berwarna abu-abu terang.

Tahukah kamu mengapa raksasa seperti YouTube, Twitter, Instagram, hingga WhatsApp semuanya berlomba-lomba menambahkan fitur Dark Mode? Jawabannya adalah karena Dark Mode menyelamatkan mata pengunjung dari radiasi cahaya putih yang menyilaukan, terutama saat mereka membuka HP di malam hari.

Bagi kita para pemilik website, membuat pengunjung nyaman berarti membuat mereka betah membaca lebih lama ( Time on Page naik ). Dan dari sudut pandang monetisasi (seperti Google AdSense), durasi kunjungan yang tinggi adalah kunci utama untuk mendapatkan penghasilan yang besar!

Oleh karena itu, hari ini kita akan membuat Proyek Tombol Dark Mode. Kita akan menggabungkan semua ilmu yang sudah kita pelajari: HTML (sebagai tulang), CSS (sebagai warna), dan Event Listener JavaScript (sebagai sakelar otomatis).

### Langkah 1: Siapkan HTML (Sakelar dan Konten)

Buatlah sebuah file HTML sederhana. Kita hanya butuh sebuah tombol sebagai sakelar dan beberapa baris teks artikel.



### Langkah 2: Meracik Dua Dunia di CSS

Ini adalah trik rahasianya. Di dalam file CSS, kita tidak hanya menyiapkan satu warna, melainkan DUA kondisi dunia yang berbeda: Dunia Siang (default) dan Dunia Malam (Class khusus).



Perhatikan baik-baik kode CSS di atas. Jika elemen body memiliki class bernama "tema-gelap", maka seluruh warna layar akan otomatis menjadi hitam. Jika class itu dicabut, warna akan kembali putih.

### Langkah 3: JavaScript Sebagai Sang Dalang

Tugas JavaScript di sini sangat sederhana namun elegan. Ia hanya bertugas sebagai tangan gaib yang memasang dan mencabut class "tema-gelap" pada elemen body setiap kali tombol diklik.



### Kesempurnaan Berkat "Toggle"

Fitur paling mematikan di dalam kode JavaScript di atas adalah penggunaan perintah classList.toggle().

Dalam bahasa Inggris, kata "Toggle" berarti sakelar lampu. Fungsi pintar ini akan mengecek layar terlebih dahulu: Jika class "tema-gelap" belum ada, maka dia akan memasangnya (menyalakan lampu). Namun jika class tersebut sudah ada, maka dia akan mencabutnya (mematikan lampu). Kamu tidak perlu menulis logika If/Else yang panjang hanya untuk memasang-cabut warna!

Gabungkan ketiga kode di atas dan jalankan di browsermu. Saat kamu mengeklik tombol tersebut, layar akan meredup menjadi gelap dengan animasi transisi setengah detik yang sangat mulus layaknya situs Apple atau Google.

Sebagai tantangan ilmu tingkat dewa (Advance) untukmu di rumah: Cobalah pelajari fitur LocalStorage di JavaScript agar saat pengunjung me-refresh halamannya, pilihan Dark Mode mereka tidak hilang dan tetap tersimpan di browser! Selamat bereksperimen dan buatlah dunia internet menjadi tempat yang ramah bagi mata pengunjung!