Dark Mode Design: Panduan Implementasi yang Benar

Dark mode yang buruk lebih melelahkan mata dari light mode. Berikut prinsip desain dark mode yang benar.

Jangan Gunakan Pure Black (#000000)

Kontras ekstrem antara teks putih dan background hitam menyebabkan halation — efek blur di mata. Gunakan dark gray:

Background: #0f0f0f atau #1a1a1a Surface: #242424 atau #2d2d2d

Gunakan Elevation dengan Lightness

Di dark mode, elemen yang "lebih tinggi" secara visual harus lebih terang, bukan diberi shadow gelap:

• Level 0: #121212

• Level 1: #1e1e1e

• Level 2: #232323

• Level 3: #282828

Kurangi Saturasi Warna

Warna vibrant di light mode bisa terlalu menyilaukan di dark mode. Kurangi saturasi sedikit.

Implementasi dengan CSS Custom Properties

:root {
  --bg-primary: #ffffff;
  --text-primary: #111827;
  --surface: #f9fafb;
}
[data-theme="dark"] {   --bg-primary: #121212;   --text-primary: #e5e7eb;   --surface: #1e1e1e; }

Tailwind Dark Mode

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <p class="text-gray-600 dark:text-gray-400">Content here</p>
</div>

Testing Dark Mode

• Test di berbagai brightness layar

• Test dengan teks kecil

• Test dengan gambar yang background transparan