Digital Transformation
CSS light-dark() Function
TL;DR: CSS
light-dark()adalah fungsi color CSS yang menerima dua argumen warna, satu untuk mode terang dan satu untuk mode gelap, lalu otomatis memilih sesuai propertycolor-schemeaktif. Didukung penuh di Chrome 123, Safari 17.5, dan Firefox 120 per April 2026, fungsi ini menggantikan setup dual-class dengan dua atau tiga baris CSS.
Apa itu CSS light-dark()?
CSS light-dark() adalah fungsi color level 5 yang membaca property color-scheme elemen lalu memilih warna pertama untuk mode terang atau kedua untuk mode gelap. Sintaksnya seperti color: light-dark(black, white);. Sebelumnya, switching warna butuh kombinasi media query prefers-color-scheme plus class toggle atau custom property dengan dua nilai berbeda di setiap selector.
Fungsi ini sebaiknya dipakai bersamaan dengan deklarasi color-scheme: light dark; di root element supaya form control native (scrollbar, checkbox, select) juga ikut beradaptasi. Untuk konteks teknis tema gelap, lihat dokumentasi resmi MDN tentang light-dark.
Cara Pakainya
| Elemen | Setup |
|---|---|
:root | Tambah color-scheme: light dark; |
| Warna teks | color: light-dark(#0f172a, #f1f5f9); |
| Background | background: light-dark(#ffffff, #0a0a0a); |
| Border | border-color: light-dark(#e2e8f0, #27272a); |
Fallback untuk browser lama tetap perlu jika audiens menyertakan iOS 17 ke bawah. Pola amannya: deklarasikan warna fallback dulu, lalu override dengan light-dark() di baris berikutnya. Browser tidak support akan abaikan baris kedua.
Kenapa Penting?
Pendekatan klasik dengan dual class atau custom property biasanya menambah 30-60 baris CSS untuk tema. Pada situs dengan banyak komponen, ini berakumulasi ke 4-8 KB stylesheet tambahan. Mengganti dengan light-dark() memangkas baris CSS sekaligus menurunkan komplikasi maintenance saat brand color berubah. Dalam refresh tema vitoatmo.com per April 2026, migrasi ke light-dark() memangkas 87 baris dari globals.css dan menghilangkan kebutuhan toggle script di PartialPrerendering Next.js.
Pertanyaan Umum
Apa beda dengan prefers-color-scheme?
prefers-color-scheme adalah media query yang membaca preferensi sistem. light-dark() membaca property color-scheme yang bisa dioverride per elemen. Anda bisa pakai keduanya bersama, tapi light-dark() lebih ringkas untuk per-warna.
Bagaimana jika user pilih tema manual?
Set color-scheme: light; atau color-scheme: dark; di root atau container saat user toggle. light-dark() akan ikut nilai itu, bukan preferensi sistem.
Istilah Terkait