W3.CSSLesson 24Preview gratis
W3.CSS Dark Mode
Lesson ini bagian dari W3.CSS · Semua level
Ringkasan
Dark mode mengganti skema warna terang dengan warna gelap yang lebih nyaman di mata, terutama pada ruangan minim cahaya. Kamu bisa mengikuti preferensi sistem lewat media query prefers-color-scheme, atau menyediakan tombol pengalih yang menyimpan pilihan pengguna. Kuncinya adalah menjaga kontras tetap memadai agar teks tetap terbaca.
Poin kunci
- Media query prefers-color-scheme mendeteksi preferensi tema sistem
- Tema gelap dapat diterapkan lewat class pada elemen induk
- Pilihan pengguna disimpan di localStorage agar tetap ingat saat dibuka lagi
- Kontras teks dan latar harus tetap memadai pada mode gelap
- Warna aksen perlu disesuaikan agar tidak menyilaukan di latar gelap
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.