Cara Menambahkan Mode Gelap ke Situs Web atau Aplikasi Anda (Tanpa Kilatan Putih)

Untuk menambahkan mode gelap, definisikan warna Anda sebagai token bernama (latar belakang, teks, permukaan, border, aksen) alih-alih nilai yang ditulis langsung, berikan setiap token nilai terang dan gelap, lalu beralih di antaranya dengan fitur media CSS prefers-color-scheme agar situs mengikuti pengaturan sistem pengunjung. Jika Anda juga ingin sakelar manual, simpan pilihan di browser dan terapkan dengan skrip inline kecil di head halaman agar tidak ada kilatan putih saat dimuat. Lalu periksa kontras, gambar, dan grafik di kedua tema. Di AI app builder, satu prompt yang jelas bisa mengerjakan sebagian besar hal ini; pemeriksaannya adalah tempat kualitas berasal.

Dua pendekatan

Sebagian besar aplikasi paling baik dengan opsi kedua: menghormati sistem secara default, dan biarkan orang menggantinya.

Mulai dengan token warna

Mode gelap menyulitkan jika warna tersebar di kode sebagai white, #333, dan gray-100. Menjadi mudah jika setiap warna berasal dari sekumpulan kecil token bernama:

Setiap komponen menggunakan nama token. Beralih tema kemudian berarti menukar satu set nilai, bukan mengedit setiap komponen.

Tips untuk palet gelap:

• Hindari hitam pekat dan putih murni untuk area yang luas; abu-abu sangat gelap dan putih keabu-abuan lebih mudah dibaca.
• Tunjukkan kedalaman dengan permukaan yang lebih terang, bukan bayangan — bayangan hampir tidak terlihat di latar gelap.
• Kurangi sedikit saturasi warna merek yang cerah; warna itu bisa menyala tidak nyaman di latar gelap.
• Jaga kontras tetap terbaca. Level AA dari WCAG meminta kontras minimal 4,5:1 untuk teks normal. Teks abu-abu redup sering gagal di tema gelap.

Dengan Tailwind CSS

Tailwind adalah alat styling default di banyak aplikasi yang dibangun dengan AI. Menurut dokumentasi mode gelap Tailwind, varian dark: menggunakan prefers-color-scheme secara default, jadi kelas seperti bg-white dark:bg-gray-900 mengikuti pengaturan sistem tanpa usaha tambahan.

Untuk sakelar manual di Tailwind v4, dokumentasinya menunjukkan cara mengubah varian menjadi class pada elemen induk:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Lalu aplikasi menambah atau menghapus class dark pada elemen root. Dokumentasi juga menyarankan skrip inline di head yang menerapkan pilihan tersimpan (atau pengaturan sistem) sebelum halaman tampil — itulah cara tepat untuk menghindari kilatan.

Menghindari kilatan putih

Kilatan terjadi karena halaman tampil dalam mode terang, lalu JavaScript dimuat, membaca pilihan tersimpan, dan beralih ke gelap. Perbaikannya:

1. Letakkan skrip inline kecil di head halaman yang membaca tema tersimpan dan menetapkan class pada elemen root sebelum apa pun dirender.
2. Atur properti CSS color-scheme untuk setiap tema agar bagian yang digambar browser (scrollbar, kontrol formulir) cocok.
3. Berikan halaman warna latar belakang eksplisit di kedua tema.
4. Jika aplikasi dirender di server, pastikan server dan browser sepakat tentang tema awal, atau halaman bisa dirender ulang dan berkedip.

Contoh prompt

Pengaturan lengkap:

Tambahkan mode gelap. Pertama, ganti warna yang ditulis langsung dengan token tema (latar belakang, permukaan, teks, teks redup, border, aksen) dengan nilai terang dan gelap. Default ke pengaturan sistem pengunjung. Tambahkan sakelar tema di header dengan pilihan Terang, Gelap, dan Sistem, ingat pilihan di localStorage, dan terapkan dengan skrip inline di head agar tidak ada kilatan putih saat dimuat. Atur color-scheme untuk setiap tema. Pertahankan desain terang saat ini persis seperti sekarang.

Memperbaiki sisanya:

Periksa setiap halaman dalam mode gelap dan perbaiki: teks dengan kontras rendah (targetkan minimal 4,5:1), latar belakang putih yang ditulis langsung, border yang hilang, grafik dengan teks gelap di latar gelap, dan logo yang menghilang. Jangan ubah tema terang.

Gambar dan grafik:

Gunakan versi logo terang di mode gelap. Buat sumbu grafik, garis kisi, dan label memakai token tema. Beri screenshot border tipis di mode gelap agar tidak menyatu dengan latar belakang.

Langkah demi langkah

1. Audit warna. Temukan warna yang ditulis langsung dan ganti dengan token. Ini sebagian besar pekerjaannya.
2. Definisikan nilai gelap untuk setiap token.
3. Ikuti sistem dengan prefers-color-scheme (atau dark: default dari Tailwind).
4. Tambahkan sakelar jika Anda menginginkannya: Terang, Gelap, Sistem. Simpan pilihan di browser; untuk aplikasi dengan login, Anda juga bisa menyimpannya ke profil pengguna.
5. Cegah kilatan dengan skrip inline di head dan color-scheme.
6. Periksa bagian yang rumit: logo, ikon, gambar dengan latar belakang putih, grafik, blok kode, peta, embed, email.
7. Uji kedua tema di desktop dan ponsel, dengan sistem diatur ke terang dan gelap, dan setelah refresh paksa.

Kesalahan umum

• Membalik semuanya. Filter yang membalik warna merusak foto dan warna merek.
• Warna yang ditulis langsung tertinggal. Satu kartu putih di halaman gelap langsung mencolok.
• Teks abu-abu berkontras rendah. Terlihat stylish, tetapi sulit dibaca.
• Kilatan putih saat dimuat. Terutama terlihat di ponsel pada malam hari.
• Lupa embed pihak ketiga. Peta, video, dan widget mungkin tetap terang; periksa apakah mereka punya opsi gelap.
• Sakelar dengan hanya dua status. Setelah seseorang mengkliknya, mereka tidak bisa kembali mengikuti sistem.
• Merusak tema terang. Tulis dengan jelas di prompt Anda bahwa desain terang harus tetap sama.

Checklist

• Semua warna berasal dari token tema
• Mengikuti pengaturan sistem secara default
• Sakelar opsional dengan Terang, Gelap, dan Sistem, diingat
• Tidak ada kilatan putih saat dimuat atau di-refresh
• color-scheme diatur agar kontrol formulir dan scrollbar cocok
• Kontras teks minimal 4,5:1 di kedua tema
• Logo, gambar, grafik, dan embed sudah diperiksa di mode gelap
• Tema terang tidak berubah
• Sudah diuji di desktop dan ponsel

Mode gelap dengan Mythex

Aplikasi yang dibangun di Mythex secara default memakai Vite, React, TypeScript, dan Tailwind, jadi pendekatan Tailwind di atas berlaku langsung: tempelkan prompt pengaturan lengkap ke chat, lalu periksa Preview di kedua tema dan pada ukuran ponsel. Saran prompt desain Mythex adalah menyebutkan apa yang diubah dan apa yang dipertahankan, yang penting di sini — katakan bahwa tema terang harus tetap seperti semula. Lihat prompt Desain & UI, dan kembali ke checkpoint jika sebuah tahap salah.

Untuk lebih banyak tentang membuat tampilan yang tepat, lihat cara mendesain aplikasi yang bagus dengan AI dan cara menulis prompt untuk AI app builder.

Pertanyaan