Digital Transformation
prefers-color-scheme (CSS Media Query)
TL;DR: prefers-color-scheme adalah CSS media query yang membaca preferensi mode terang atau gelap di sistem pengguna. Dengan satu blok CSS, website otomatis menampilkan tema yang sesuai tanpa perlu JavaScript atau toggle manual. Dukungan browser sudah hampir universal sejak 2020.
Apa itu prefers-color-scheme?
prefers-color-scheme adalah fitur CSS yang membaca pengaturan tema sistem operasi, lalu menerapkan blok style sesuai pilihan pengguna. Nilainya tiga: light, dark, atau no-preference. Saat pengguna mengaktifkan dark mode di iOS, macOS, Windows, atau Android, browser akan otomatis mengeksekusi blok @media (prefers-color-scheme: dark). Tidak ada JavaScript yang dibutuhkan untuk deteksi awal.
Fitur ini melengkapi design system modern karena memungkinkan satu sumber CSS melayani dua tema sekaligus. Kombinasinya yang umum dipakai adalah custom property (CSS variables) yang nilainya di-override di dalam blok media query.
Cara Kerja prefers-color-scheme
Implementasi paling ringkas memakai CSS variables sebagai kontrak warna.
| Langkah | Aksi |
|---|---|
| 1. Definisikan token | Buat CSS variable untuk warna background, teks, border, dan aksen |
| 2. Set default light | Beri nilai default di :root untuk mode terang |
| 3. Override dark | Ganti nilai variable di @media (prefers-color-scheme: dark) { :root { ... } } |
| 4. Pakai variable | Komponen UI memanggil var(--bg), tidak hardcode warna |
| 5. Tes kontras | Pastikan rasio kontras minimal 4,5:1 untuk teks normal di kedua mode |
Pendekatan ini lebih hemat dibanding library JavaScript karena tidak menambah beban LCP dan tidak memicu flash of unstyled content saat halaman pertama dirender.
Kenapa Penting untuk Marketer Indonesia?
Tiga alasan utama bagi marketer dan pemilik bisnis. Pertama, sekitar 40 sampai 60 persen pengguna mobile aktif memakai dark mode menurut data internal beberapa platform sosial besar, terutama di waktu malam. Halaman bisnis yang menyala terang justru terasa silau dan ditinggalkan. Kedua, dark mode otomatis menghemat baterai pada layar OLED, yang dominan di smartphone Indonesia tahun 2026. Ketiga, fitur ini membuat website terasa premium tanpa biaya development tinggi.
Saat membangun landing personal brand Yuanita Sekar, penambahan blok prefers-color-scheme menambah engagement halaman malam (jam 19 sampai 23) sekitar 14 persen di GA4. Rentang ini hasil A/B test internal selama dua minggu, hasil bisa berbeda pada audiens lain.
Pertanyaan Umum
Apakah perlu toggle manual selain prefers-color-scheme?
Disarankan punya. Sebagian pengguna ingin tema berbeda dari sistem (misal sistem dark, web tetap light). Praktik standar di industri adalah menyimpan pilihan manual di localStorage, lalu jatuh ke prefers-color-scheme jika tidak ada preferensi yang disimpan.
Apakah prefers-color-scheme mempengaruhi SEO?
Tidak langsung. Google merayapi HTML dan teks, bukan warna. Tapi pengalaman pengguna yang nyaman menurunkan bounce rate dan menaikkan dwell time, yang merupakan sinyal kualitas tidak langsung.
Istilah Terkait