CSS light-dark() (Function)

TL;DR: CSS light-dark() adalah fungsi color yang mengembalikan nilai pertama saat color-scheme dokumen light dan nilai kedua saat dark. Per April 2026 sudah Baseline 2024, sehingga implementasi dark mode di website bisnis bisa diganti dari 40-80 deklarasi media query menjadi inline di token warna.

Apa itu CSS light-dark()?

CSS light-dark() adalah fungsi yang menerima dua nilai warna dan memilih salah satunya sesuai color-scheme yang aktif. Sebelum fungsi ini, dark mode butuh @media (prefers-color-scheme: dark) di banyak titik atau pakai CSS variable yang di-swap via class.

Dengan light-dark(), satu deklarasi cukup. Browser yang menentukan output sesuai konteks.

Sintaks dan Contoh

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #0a0a0a);
  --text: light-dark(#0a0a0a, #f5f5f5);
}

body {
  background: var(--bg);
  color: var(--text);
}

Lihat dokumentasi resmi di MDN light-dark().

Kenapa Penting untuk Marketer Indonesia?

Pengunjung Indonesia di mobile sering pakai dark mode default. Implementasi dark mode dengan light-dark() mengurangi CSS bundle 20-40% dibanding pendekatan dual class, sehingga LCP membaik di koneksi 4G yang masih dominan di luar kota besar.

Pertanyaan Umum

Apakah light-dark() menggantikan prefers-color-scheme?

Untuk swap warna sederhana, ya. Untuk swap konten/layout besar, media query tetap dibutuhkan.

Apakah perlu fallback?

Sebaiknya iya. Tulis warna fallback lebih dulu sebelum light-dark() agar browser lama tetap dapat warna yang masuk akal.