Fitur dark mode sekarang sudah jadi ekspektasi, bukan lagi opsi tambahan. Baik di sistem operasi, aplikasi, maupun website — user berharap ada opsi untuk beralih. Tapi implementasi yang buruk justru bikin mata lebih cepat lelah daripada light mode biasa.
Masalah paling umum: kontras yang terlalu tinggi. Teks putih murni (#FFFFFF) di atas background hitam murni (#000000) menghasilkan rasio kontras yang menyakitkan untuk dibaca dalam waktu lama. Ini bukan dark mode yang baik — ini mode 'sorot senter ke mata'.
Panduan praktis dark mode yang nyaman
- Gunakan dark gray (#1A1A1A atau #121212) sebagai background, bukan pure black — lebih lembut di mata
- Teks utama pakai off-white (#E0E0E0 atau #F5F5F5) — kontras tetap tinggi tapi tidak menyilaukan
- Hindari bayangan — di dark mode, elevation lebih baik ditunjukkan dengan perbedaan kecerahan
- Saturasi warna lebih rendah — warna cerah di background gelap terlihat jauh lebih intens
- Uji di kondisi real — dark mode yang kelihatan bagus di monitor studio belum tentu nyaman di HP dalam ruangan gelap
Implementasi dark mode juga perlu strategi teknis. Jangan pakai CSS filter invert — hasilnya tidak terkontrol dan bikin image jadi negatif. Gunakan CSS custom properties (variabel) untuk warna, dan toggle class di elemen root. Butuh effort tambahan di awal, tapi hasilnya jauh lebih presisi dan accessible.