Merancang Dark Mode yang Baik

Dark mode bukan sekadar membalik hitam-putih — ada prinsip khusus yang harus dipahami.

Prinsip Utama Dark UI

1. Jangan gunakan pure black (#000000) sebagai background — ini terlalu kontras dan melelahkan mata
2. Background utama: gunakan dark gray (#111827, #1F2937, atau #18181B)
3. Surface/card: sedikit lebih terang dari background (#1F2937, #27272A)
4. Hierarchy melalui elevation — elemen yang "lebih tinggi" = lebih terang

Color Palette untuk Dark Mode

/* Dark mode variables */
:root {
  --bg-primary: #111827;       /* Background utama */
  --bg-secondary: #1F2937;     /* Card, sidebar */
  --bg-tertiary: #374151;      /* Hover, selected */
  --text-primary: #F9FAFB;     /* Teks utama (bukan pure white) */
  --text-secondary: #9CA3AF;   /* Teks sekunder */
  --border: #374151;           /* Border */
}

Kontras di Dark Mode

• Teks putih di background gelap: kontras otomatis tinggi — hati-hati jangan terlalu silau
• Gunakan off-white (#F9FAFB atau #E5E7EB) untuk body text, bukan #FFFFFF
• Warna aksen perlu disesuaikan — biru terang yang bagus di light mode bisa terlalu silau di dark mode. Turunkan sedikit lightness/saturation

Respecting User Preference

/* Deteksi preferensi OS */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #111827;
    --text-primary: #F9FAFB;
  }
}

Tips

1. Test kedua mode — pastikan semua element terlihat baik di light dan dark
2. Gambar dan ikon mungkin perlu variant dark mode
3. Shadow tidak efektif di dark mode — gunakan border atau warna surface yang lebih terang
4. Jangan hanya invert — redesain warna dari nol untuk dark mode

GitHub, Vercel, dan Linear memiliki dark mode yang sangat baik — perhatikan bagaimana mereka menggunakan elevation melalui gradasi brightness, bukan shadow.