Dark mode dengan variabel
Inilah kenapa variabel CSS begitu berharga: definisikan warna sekali, lalu ganti nilainya saja di dalam @media (prefers-color-scheme: dark). Seluruh halaman ikut berubah tanpa menulis ulang satu pun aturan komponen. Pendekatan ini yang dipakai hampir semua situs modern. Sediakan juga pilihan manual di antarmuka bila memungkinkan, karena sebagian pengguna ingin memaksa satu tema tanpa mengubah pengaturan sistemnya.
👀 Contoh dulu
:root {
--kartu: #ffffff;
--teks: #111111;
}
@media (prefers-color-scheme: dark) {
:root {
--kartu: #1f2937;
--teks: #f9fafb;
}
}
.kartu { background: var(--kartu); color: var(--teks); }Hasilnya: Seluruh komponen ikut berubah saat pengguna menyalakan mode gelap — tanpa satu pun aturan komponen ditulis dua kali.
💡 Kunci pendekatan ini: komponen hanya memakai var(), dan media query hanya mengganti NILAI variabelnya.
📝 Sekarang giliranmu
Tambahkan @media (prefers-color-scheme: dark) yang mengubah :root menjadi --bg: #0f172a dan --fg: #f8fafc.