Belajar UI Designer - Dark Mode & Themes

#Pendahuluan

Setelah di episode 9 kita membangun design system dengan token berlapis, pada episode ini lapisan semantik itu berbuah: theming. Dark mode bukan lagi fitur bonus — ia fitur yang diharapkan hampir semua pengguna aplikasi modern, terutama untuk aplikasi yang dipakai malam hari seperti Kantongin.

Mengapa dark mode adalah ujian terbaik design system kalian? Karena tema tidak boleh didesain ulang dari nol — ia harus menukar nilai pada token semantik yang sama. Kalau fondasi token di episode 9 benar, dark mode hampir menjadi kerja mekanis; kalau salah, dark mode jadi proyek desain terpisah yang tidak pernah konsisten dengan tema utama.

#Strategi Dark Mode: Swap Token, Bukan Redesign

Prinsip inti: warna di layar tidak boleh ditulis langsung, melainkan lewat token semantik. Untuk dark mode, kalian hanya mengganti nilai token semantik — struktur, komponen, dan layout tetap sama:

Token semantic yang bertukar nilai (light → dark)

color.background   = neutral.50   → neutral.950
color.surface      = white        → neutral.900
color.text.primary = ink.900      → neutral.50
color.text.muted   = ink.500      → neutral.400
color.border       = neutral.200  → neutral.800
color.primary      = blue.500     → blue.400   (sedikit lebih terang)

Perhatikan primary di dark mode dibuat lebih terang — karena warna brand yang gelap di atas latar gelap kehilangan kontras. Aturan ini berlaku untuk hampir semua warna "aksen".

#Pure Black atau Dark Grey?

Pertanyaan klasik: apakah latar dark mode memakai #000000 murni? Jawaban industri umumnya tidak:

Pure black memantulkan sedikit dan membuat kontras berlebihan pada panel OLED, serta menyulitkan elevation — semua bayangan hilang di atas hitam.
Dark grey (misal #0F1115, #1A1B1F) memungkinkan lapisan elevasi terlihat: kartu sedikit lebih terang dari latar, shadow masih bisa dibaca.

Elevasi di dark mode (keluarga netral gelap)

background (paling gelap)   #0F1115
surface / kartu             #171A21  (lebih terang dari bg)
raised / dropdown           #1F242C  (lebih terang lagi)

Karena dalam mode gelap elevasi dibangun dari kecerahan (bukan bayangan), kalian perlu skala netral gelap dengan setidaknya 3-4 tingkat. Menyalin netral light lalu dibalik jarang berhasil — bangun ramp gelap terpisah.

Tip

Saat membangun dark mode, jangan coba "menebak" proporsi elevasi. Ambil referensi dari aplikasi yang dark mode-nya matang (misal aplikasi trading atau note-taking), lalu sesuaikan ramp gelap Kantongin hingga perbedaan antar lapisan terlihat jelas namun tetap tenang.

#Jebakan Klasik Dark Mode

Beberapa hal yang paling sering salah:

Membalik kontras teks saja — hanya mengganti teks putih-hitam, tapi border dan latar tetap; hasilnya "filter negatif", bukan dark mode yang didesain.
Warna semantik tidak disesuaikan — hijau sukses dan merah danger yang di light mode terang jadi menyilaukan di dark; gunakan varian yang lebih redup.
Aset tidak menyiapkan varian — ikon dan ilustrasi yang digambar untuk light mode muncul "kasar" di dark; siapkan varian aset per tema.
Lupa mode system — tema harus bisa mengikuti pengaturan sistem (auto), bukan hanya toggle manual.

#Dynamic Color per Platform

Dynamic color adalah kemampuan tema menyesuaikan dengan pengaturan sistem (iOS/Android). Kedua platform punya sistemnya: Material You (Android) membangkitkan warna dari wallpaper pengguna; iOS memakai semantic colors yang otomatis menyesuaikan light/dark. Implikasi untuk desain: token semantik harus satu sumber yang di-bind ke sistem — desainer tidak lagi "memilih warna gelap", melainkan memastikan token bertukar nilai dengan benar.

#Menjaga Kontras di Dark Mode

Dark mode bukan berarti bebas dari aturan aksesibilitas — kontras AA tetap wajib. Dua kasus khusus:

Shadow di dark mode hampir tidak terlihat; ganti dengan border tipis atau elevation kecerahan.
Kontras teks diukur terhadap latar masing-masing tema — teks neutral.50 di atas neutral.900 (dark) dan ink.900 di atas neutral.50 (light) adalah dua pengukuran yang berbeda, bukan "sekali jadi".

Gunakan Stark di kedua tema — rasio AA dicek per tema, bukan sekali.

Warning

Jangan pernah menampilkan warna hardcoded yang sama di light dan dark tanpa token. Misalnya shadow yang "kelihatan bagus" di light tapi tak terlihat di dark — keduanya harus dari token elevation.* yang didefinisikan per tema. Jika tidak, dark mode selalu terasa "setengah jadi".

#Praktik: Tema Kantongin

Buka file Kantongin-System; pastikan semua warna di layar memakai token semantik (cek: tidak ada hex langsung di komponen).
Bangun mode dark pada Figma variables (buat mode Dark, set nilai tiap token semantik).
Terapkan mode dark ke satu halaman penuh (beranda) dan periksa: teks, kartu, border, dan warna semantik.
Uji kontras Stark di dark mode untuk teks body dan placeholder.
Siapkan varian ikon/ilustrasi untuk dark jika perlu (misal ikon berwarna terang).

#Common Pitfalls

Dark mode = negatif light mode — tanpa desain elevasi, hasilnya "filter", bukan tema.
Pure black latar — elevasi hilang; pilih dark grey berlapis.
Aksen tidak dirapatkan — warna brand yang sama di dark terasa menyala; gunakan varian lebih terang.
Kontras tidak diuji per tema — rasio yang lolos di light belum tentu lolos di dark.
Aset tanpa varian tema — ilustrasi/ikon light terlihat kotor di dark.

#Penutup

Pada episode 10 ini, kalian telah membangun theming yang hidup: dark mode sebagai penukaran token, bukan redesign.

Inti yang harus dibawa pulang:

Dark mode = swap token semantik, bukan mendesain ulang komponen.
Latar dark memakai dark grey berlapis untuk elevasi, bukan pure black.
Warna aksen dan semantik di dark dibuat lebih redup/terang sesuai kebutuhan kontras.
Dynamic color per platform berarti token harus satu sumber yang di-bind ke sistem.

Di episode 11 selanjutnya kita akan membahas mobile & responsive UI — mobile-first, breakpoints, dan adaptasi per platform untuk membuat Kantongin nyaman di berbagai ukuran layar. Sampai jumpa di episode 11!