Masih ingat tahun 2018 ketika "Dark Mode" hanyalah fitur tambahan (gimmick) di beberapa aplikasi developer? Maju ke tahun 2025, Dark Mode bukan lagi pilihan sekunder. Ini adalah standar industri. Data menunjukkan bahwa lebih dari 82% pengguna menyalakan mode gelap secara permanen di perangkat mereka.
Namun, mendesain antarmuka gelap tidak semudah membalikkan warna putih menjadi hitam. Ada sains mendalam tentang kontras, saturasi warna, dan kesehatan mata yang harus diperhatikan.
1. Masalah "Halation" dan Mitos Pure Black
Kesalahan terbesar desainer pemula adalah menggunakan warna hitam pekat (#000000) sebagai background dan putih murni (#FFFFFF) sebagai teks. Ini menyebabkan efek yang disebut Halation atau pendaran cahaya, di mana teks terlihat berbayang dan menyakitkan mata bagi penderita astigmatisme.
"Jangan gunakan hitam murni. Gunakan Dark Grey (misalnya #121212). Ini memberikan kedalaman (depth) dan mengurangi ketegangan mata secara signifikan."
Prinsip Material Design 3.0
Google menyarankan penggunaan sistem elevasi berbasis cahaya:
- Surface 0 (Background): #121212
- Surface 1 (Card): #1E1E1E (5% lebih terang)
- Surface 2 (Hover/Modal): #232323 (7% lebih terang)
- Surface 3 (Active): #252525 (8% lebih terang)
2. Saturasi Warna yang Menipu
Warna biru tua yang terlihat bagus di background putih akan terlihat redup atau bahkan tidak terbaca di background gelap. Sebaliknya, warna cerah dengan saturasi tinggi akan menyebabkan getaran visual (visual vibration).
Solusinya adalah Desaturasi. Kurangi saturasi warna aksen Anda agar lebih nyaman di mata saat mode gelap aktif.
3. Implementasi CSS Modern
Di tahun 2025, kita tidak lagi menggunakan class manual pada body. Kita menggunakan fitur native CSS prefers-color-scheme dan CSS Variables:
:root {
--bg-primary: #ffffff;
--text-primary: #111111;
--accent: #0070f3;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212; /* Dark Grey, bukan Black */
--text-primary: #ededed; /* Off-white, bukan Pure White */
--accent: #3291ff; /* Warna aksen yang lebih terang/pastel */
}
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
}
Kesimpulan
Dark Mode adalah tentang empati. Ini tentang memahami bahwa pengguna Anda mungkin membuka aplikasi Anda di kamar tidur yang gelap, atau ingin menghemat baterai di layar OLED mereka. Sebagai desainer, tugas kita adalah memastikan kenyamanan visual dalam kondisi pencahayaan apapun.