Cara Menambah Mod Gelap ke Laman Web atau Apl Anda (Tanpa Kilatan Putih)

Untuk menambah mod gelap, takrifkan warna anda sebagai token yang dinamakan (latar belakang, teks, permukaan, sempadan, aksen) dan bukannya nilai yang dikodkan keras, berikan setiap token nilai cerah dan gelap, dan tukar antara keduanya dengan ciri media prefers-color-scheme supaya laman mengikut tetapan sistem pelawat. Jika anda mahukan suis manual juga, simpan pilihan dalam pelayar dan gunakannya dengan skrip sebaris kecil dalam kepala halaman supaya tiada kilatan putih semasa dimuatkan. Kemudian semak kontras, imej dan carta dalam kedua-dua tema. Dalam pembina apl AI, satu prompt yang jelas boleh melakukan kebanyakan kerja ini; bahagian semakan ialah tempat kualiti datang.

Dua pendekatan

Kebanyakan apl berprestasi terbaik dengan pilihan kedua: hormati sistem secara lalai, dan benarkan orang menggantikannya.

Mulakan dengan token warna

Mod gelap menyakitkan apabila warna tersebar dalam kod sebagai white, #333 dan gray-100. Ia mudah apabila setiap warna datang daripada set kecil token yang dinamakan:

Setiap komponen menggunakan nama token. Menukar tema kemudian bermakna menggantikan satu set nilai, bukan menyunting setiap komponen.

Tip untuk palet gelap:

• Elakkan hitam tulen dan putih tulen untuk kawasan yang besar; kelabu sangat gelap dan putih pudar lebih mudah dibaca.
• Tunjukkan kedalaman dengan permukaan yang lebih cerah, bukan bayang — bayang hampir tidak kelihatan pada latar belakang gelap.
• Kurangkan sedikit ketepuan warna jenama yang terang; ia boleh bersinar secara tidak selesa pada latar belakang gelap.
• Pastikan kontras boleh dibaca. Tahap AA WCAG memerlukan sekurang-kurangnya 4.5:1 kontras untuk teks biasa. Teks kelabu yang pudar sering gagal ujian ini dalam tema gelap.

Dengan Tailwind CSS

Tailwind ialah alat gaya lalai dalam banyak apl yang dibina dengan AI. Menurut dokumentasi mod gelap Tailwind, varian dark: menggunakan prefers-color-scheme secara lalai, jadi kelas seperti bg-white dark:bg-gray-900 mengikut tetapan sistem tanpa kerja tambahan.

Untuk suis manual dalam Tailwind v4, dokumentasi menunjukkan pertukaran varian kepada kelas pada elemen induk:

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

Kemudian apl menambah atau membuang kelas dark pada elemen akar. Dokumentasi juga mencadangkan skrip sebaris dalam kepala yang menggunakan pilihan yang disimpan (atau tetapan sistem) sebelum halaman dilukis — dan inilah tepatnya cara mengelakkan kilatan.

Mengelakkan kilatan putih

Kilatan berlaku kerana halaman dilukis dalam mod cerah, kemudian JavaScript dimuatkan, membaca pilihan yang disimpan, dan bertukar kepada gelap. Penyelesaiannya:

1. Letakkan skrip sebaris kecil dalam kepala halaman yang membaca tema yang disimpan dan menetapkan kelas pada elemen akar sebelum apa-apa dilukis.
2. Tetapkan sifat CSS color-scheme untuk setiap tema supaya bahagian yang dilukis pelayar (bar tatal, kawalan borang) sepadan.
3. Berikan halaman warna latar belakang yang jelas dalam kedua-dua tema.
4. Jika apl dipaparkan di pelayan, pastikan pelayan dan pelayar bersetuju tentang tema awal, atau halaman mungkin dipaparkan semula dan berkelip.

Contoh prompt

Persediaan lengkap:

Tambahkan mod gelap. Mula-mula gantikan warna yang dikodkan keras dengan token tema (latar belakang, permukaan, teks, teks lut, sempadan, aksen) dengan nilai cerah dan gelap. Lalai kepada tetapan sistem pelawat. Tambah suis tema dalam pengepala dengan pilihan Cerah, Gelap dan Sistem, ingat pilihan dalam localStorage, dan gunakannya dengan skrip sebaris dalam kepala supaya tiada kilatan putih semasa dimuatkan. Tetapkan color-scheme untuk setiap tema. Kekalkan reka bentuk cerah semasa dengan tepat seperti sekarang.

Membetulkan apa yang tinggal:

Semak setiap halaman dalam mod gelap dan betulkan: teks dengan kontras rendah (sasarkan sekurang-kurangnya 4.5:1), latar belakang putih yang dikodkan keras, sempadan yang hilang, carta dengan teks gelap pada latar belakang gelap, dan logo yang lenyap. Jangan ubah tema cerah.

Imej dan carta:

Gunakan versi logo yang cerah dalam mod gelap. Jadikan paksi carta, garisan grid dan label menggunakan token tema. Berikan tangkapan skrin sempadan halus dalam mod gelap supaya ia tidak sebati dengan latar belakang.

Langkah demi langkah

1. Audit warna. Cari warna yang dikodkan keras dan gantikannya dengan token. Inilah sebahagian besar kerjanya.
2. Takrifkan nilai gelap untuk setiap token.
3. Ikut sistem dengan prefers-color-scheme (atau lalai dark: Tailwind).
4. Tambah suis jika anda mahukannya: Cerah, Gelap, Sistem. Simpan pilihan dalam pelayar; untuk apl yang memerlukan log masuk, anda juga boleh menyimpannya pada profil pengguna.
5. Elakkan kilatan dengan skrip kepala sebaris dan color-scheme.
6. Semak bahagian yang rumit: logo, ikon, imej dengan latar belakang putih, carta, blok kod, peta, benam, e-mel.
7. Uji kedua-dua tema pada desktop dan telefon, dengan sistem ditetapkan kepada cerah dan gelap, dan selepas muat semula keras.

Kesilapan biasa

• Membalikkan segalanya. Penapis yang membalikkan warna merosakkan foto dan warna jenama.
• Warna yang dikodkan keras ditinggalkan. Satu kad putih dalam halaman gelap menonjol serta-merta.
• Teks kelabu kontras rendah. Kelihatan bergaya, tetapi gagal dari segi kebolehbacaan.
• Kilatan putih semasa dimuatkan. Terutamanya ketara pada telefon pada waktu malam.
• Terlupa benam pihak ketiga. Peta, video dan widget mungkin kekal cerah; semak sama ada ia mempunyai pilihan gelap.
• Suis dengan dua keadaan sahaja. Sebaik seseorang mengkliknya, mereka tidak boleh kembali mengikut sistem.
• Merosakkan tema cerah. Nyatakan dengan jelas dalam prompt anda bahawa reka bentuk cerah patut kekal sama.

Senarai semak

• Semua warna datang daripada token tema
• Ikut tetapan sistem secara lalai
• Suis pilihan dengan Cerah, Gelap dan Sistem, diingati
• Tiada kilatan putih semasa dimuatkan atau dimuat semula
• color-scheme ditetapkan supaya kawalan borang dan bar tatal sepadan
• Kontras teks sekurang-kurangnya 4.5:1 dalam kedua-dua tema
• Logo, imej, carta dan benam disemak dalam mod gelap
• Tema cerah tidak berubah
• Diuji pada desktop dan telefon

Mod gelap dengan Mythex

Apl yang dibina di Mythex menggunakan Vite, React, TypeScript dan Tailwind secara lalai, jadi pendekatan Tailwind di atas terus terpakai: tampal prompt persediaan lengkap ke dalam sembang, kemudian semak Pratonton dalam kedua-dua tema dan pada saiz telefon. Panduan reka bentuk Mythex ialah menamakan apa yang hendak diubah dan apa yang hendak dikekalkan, dan ini penting di sini — nyatakan bahawa tema cerah mesti kekal seperti sedia ada. Lihat Prompt reka bentuk dan UI, dan undur dengan checkpoint jika satu pas tersilap.

Untuk lebih lanjut tentang mendapatkan rupa yang betul, lihat cara mereka bentuk apl yang kelihatan menarik dengan AI dan cara menulis prompt untuk pembina apl AI.

Soalan lazim