MoreLesson 224Preview gratis
Toggle Dark Mode
Lesson ini bagian dari How To · Semua level
Ringkasan
Dark mode adalah tema gelap yang dapat diaktifkan pengguna sesuai preferensi. Implementasi modern memakai CSS variables untuk warna, lalu mengganti nilainya ketika kelas dark ditambahkan pada elemen html atau body. Pilihan pengguna dapat disimpan di localStorage agar tetap berlaku saat halaman dibuka kembali.
Poin kunci
- Definisikan warna tema sebagai CSS variables pada :root
- Tambahkan kelas .dark pada html atau body untuk menimpa variabel
- Simpan preferensi dengan localStorage dan baca saat halaman dimuat
- Hormati preferensi sistem melalui media query prefers-color-scheme
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.