CSS Custom Properties (Variables) & Dark Mode

Rancang arsitektur tema dinamis yang mudah dirawat menggunakan CSS Variables (--custom-prop) dan implementasi saklar tema Light/Dark mode.

CSS Variables dideklarasikan dengan awalan tanda minus ganda (--) dan diakses menggunakan fungsi var(). Variabel di dalam :root berlaku global untuk seluruh dokumen.

:root {
  --bg-surface: #faf7f2;
  --text-main: #1a1816;
  --border-color: #e4ddd2;
}

/* Penimpaan Nilai saat Mode Gelap Aktif */
html.dark {
  --bg-surface: #24201e;
  --text-main: #e6e4dd;
  --border-color: #433d39;
}

body {
  background-color: var(--bg-surface);
  color: var(--text-main);
  transition: background-color 0.3s ease;
}