Cara Marketer Indonesia Pasang CSS light-dark() di Next.js untuk Tema Gelap-Terang, Pangkas 87 Baris CSS dan 4,2 KB Stylesheet di 2026

TL;DR: CSS light-dark() function memilih warna berdasarkan property color-scheme aktif, mengganti pola dual-class plus custom property yang dipakai sebagian besar setup tema gelap-terang Next.js. Dalam refresh vitoatmo.com per April 2026, migrasi ke light-dark() memangkas 87 baris dari globals.css dan menghemat 4,2 KB stylesheet sambil menghapus toggle script JavaScript.

Setiap kali saya audit situs Next.js klien yang punya tema gelap, pola yang muncul mirip. Dua atau tiga custom property warna untuk light, dua atau tiga untuk dark, dibungkus media query prefers-color-scheme, plus selector [data-theme="dark"] untuk override manual. Hasilnya stylesheet membengkak dan setiap penambahan warna baru harus didefinisikan tiga kali.

Per April 2026, fitur CSS native light-dark() sudah didukung Chrome 123, Safari 17.5, dan Firefox 120. Saya pasang ini di refresh vitoatmo.com bulan lalu, dan ada satu metrik yang langsung berubah, jumlah baris CSS untuk tema turun dari 142 ke 55. Artikel ini menjelaskan cara migrasi yang aman dan apa yang harus diperhatikan untuk audiens Indonesia yang masih banyak pakai iOS 16.

Pola Lama yang Bikin Stylesheet Membengkak

Setup tema klasik di Next.js biasanya pakai tiga lapis. Lapis pertama: deklarasi custom property di :root untuk light. Lapis kedua: media query @media (prefers-color-scheme: dark) untuk dark mode otomatis. Lapis ketiga: selector class atau attribute untuk toggle manual lewat localStorage. Pola ini bekerja tapi setiap warna baru menambah tiga sampai lima baris. Untuk panduan CSS light-dark() Function baca glosariumnya dulu.

Stylesheet refresh vitoatmo.com yang lama punya 142 baris khusus tema. Setiap kali butuh tambah warna brand baru, saya harus update tiga tempat. Jika lupa satu, dark mode patah di satu komponen. Toggle script di header pakai 1,8 KB JavaScript untuk membaca localStorage dan mengset attribute data-theme.

Setup light-dark() Tiga Langkah

Langkah pertama penting karena memberi tahu browser bahwa form control native, scrollbar, dan checkbox boleh adaptasi. Tanpa ini, scrollbar tetap terang di dark mode dan terlihat aneh.

Langkah kedua paling banyak edit. Setiap nilai warna di stylesheet diganti. Contoh paling sederhana: color: light-dark(#0f172a, #f1f5f9); untuk teks utama, background: light-dark(#ffffff, #0a0a0a); untuk background body. Selesai. Tidak butuh class, tidak butuh override media query lagi.

Langkah ketiga untuk toggle manual. Daripada mengset data-theme="dark" lalu override di CSS, cukup body { color-scheme: dark; } saat user pilih dark, body { color-scheme: light; } saat user pilih light. Tiga baris JavaScript, tidak butuh library tema seperti next-themes lagi untuk kasus sederhana.

Studi Kasus Refresh vitoatmo.com

Saat saya refresh tema vitoatmo.com per April 2026, baseline stylesheet 142 baris tema dan toggle script 1,8 KB. Setelah migrasi ke light-dark() dengan setup di atas, hasilnya:

• Baris CSS tema: dari 142 ke 55 baris (pangkas 87 baris)
• Stylesheet total: turun 4,2 KB sebelum kompresi
• Toggle script: dihapus sepenuhnya, ganti dengan inline 200 byte di server component
• Layout shift saat toggle: sebelumnya muncul flash karena hydration delay Total Blocking Time, sekarang transition langsung

Bagian yang paling saya hargai bukan angka, melainkan kemudahan menambah komponen baru. Komponen Card baru di refresh ini ditulis sekali dengan light-dark(), otomatis adaptasi tanpa perlu duplikasi selector. Kombinasi dengan [Partial Prerendering Next.js](/glosarium/partial-prerendering-nextjs) menjadi rapi karena CSS yang diserve di server component sudah final.

Fallback untuk iOS Lama

Audiens Indonesia masih banyak pakai iOS 16 atau Android browser tua di chipset entry. Per data Statcounter Maret 2026, sekitar 14 persen lalu lintas mobile di Indonesia masih di Safari 16 ke bawah. Pola fallbacknya: deklarasi warna fallback dulu, lalu override dengan light-dark() di baris berikutnya.

.card {
  color: #0f172a;
  color: light-dark(#0f172a, #f1f5f9);
  background: #ffffff;
  background: light-dark(#ffffff, #0a0a0a);
}

Browser yang tidak mengenal light-dark() akan abaikan baris kedua dan pakai baris pertama. Untuk dark mode otomatis di browser lama, tambah satu @media (prefers-color-scheme: dark) khusus fallback dengan komentar jelas supaya developer tahu blok itu bisa dihapus saat browser support sudah cukup.

Pertanyaan Umum

Apakah light-dark() menggantikan next-themes?

Untuk kasus toggle sederhana iya. Tapi jika butuh sinkronisasi server-client, persist preferensi cross-device, atau theme custom selain light-dark, library seperti next-themes masih relevan.

Bagaimana dengan Tailwind CSS v4?

Tailwind CSS v4 sudah expose light-dark() via utility custom. Anda bisa tulis [--text:light-dark(theme(colors.slate.900),theme(colors.slate.100))] lalu pakai text-[var(--text)]. Lebih ringkas untuk komponen yang banyak warna.

Apa risiko aksesibilitas?

Pastikan kontras warna tetap lulus WCAG AA di kedua mode. Tool seperti Stark atau extension axe DevTools bisa cek kontras light-dark() langsung karena membaca computed style.

Penutup

Migrasi ke light-dark() bukan optimasi prematur. Setiap baris CSS yang dipangkas adalah satu titik maintenance lebih sedikit di masa depan. Untuk Next.js project baru di 2026, saya tidak lagi reach next-themes di awal. Saya mulai dengan color-scheme: light dark; dan light-dark(), baru pertimbangkan library kalau butuh fitur tema kompleks.