Paano Magdagdag ng Dark Mode sa Website o App (Nang Walang White Flash)

Para magdagdag ng dark mode, tukuyin ang mga kulay mo bilang pinangalanang tokens (background, text, surface, border, accent) sa halip na hard-coded na value, bigyan ang bawat token ng light at dark na value, at magpalit sa pagitan ng mga ito gamit ang CSS prefers-color-scheme media feature para sumunod ang site sa system setting ng bisita. Kung gusto mo rin ng manual na toggle, itago ang pinili sa browser at i-apply ito gamit ang maliit na inline script sa head ng page para walang white flash sa pag-load. Pagkatapos, suriin ang contrast, mga larawan at charts sa parehong theme. Sa AI app builder, isang malinaw na prompt ang kayang gumawa ng karamihan nito; ang pagsusuri ang nagpapatibay ng kalidad.

Dalawang paraan

Karamihan ng app ay mas mabuti sa pangalawa: igalang muna ang system bilang default, pero hayaang mag-override ang tao.

Magsimula sa color tokens

Mahirap ang dark mode kapag nakakalat sa code ang mga kulay tulad ng white, #333 at gray-100. Madali ito kapag galing sa maliit na set ng pinangalanang tokens ang bawat kulay:

Gumagamit ang bawat component ng mga pangalan ng token. Kaya ang pagpapalit ng theme ay pagpapalit lang ng isang set ng values, hindi pag-e-edit sa bawat component.

Mga tip para sa dark palette:

• Iwasan ang purong itim at purong puti sa malalaking bahagi; mas madaling basahin ang napakadilim na kulay-abo at halos puting kulay.
• Ipakita ang lalim gamit ang mas magaang na surfaces, hindi shadows, dahil halos hindi nakikita ang shadows sa madilim na background.
• Bahagyang bawasan ang saturation ng matitingkad na brand colors; maaari silang magliwanag nang nakakairita sa madilim na background.
• Panatilihing nababasa ang contrast. Ang WCAG AA level ay humihingi ng hindi bababa sa 4.5:1 na contrast para sa normal na text. Madalas pumalya ang muted na kulay-abong text sa dark themes.

Sa Tailwind CSS

Ang Tailwind ang default na styling tool sa maraming app na ginawa ng AI. Ayon sa dark mode docs ng Tailwind, ang dark: variant ay gumagamit ng prefers-color-scheme bilang default, kaya sumusunod ang mga class tulad ng bg-white dark:bg-gray-900 sa system setting nang walang dagdag na gawa.

Para sa manual na toggle sa Tailwind v4, ipinapakita ng docs na palitan ang variant ng isang class sa parent element:

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

Pagkatapos, dinadagdag o tinatanggal ng app ang dark class sa root element. Iminumungkahi rin ng docs ang inline script sa head na nag-a-apply ng naka-save na pinili (o ng system setting) bago mag-paint ang page, na siyang tamang paraan para maiwasan ang flash.

Pag-iwas sa white flash

Nangyayari ang flash dahil nagpi-paint muna ang page sa light mode, saka mag-lo-load ang JavaScript, babasahin ang naka-save na pinili, at lilipat sa dark. Ang ayos:

1. Maglagay ng maliit na inline script sa head ng page na bumabasa ng naka-save na theme at nagtatakda ng class sa root element bago mag-render ng anuman.
2. Itakda ang color-scheme CSS property para sa bawat theme para magtugma ang mga bahaging iginuguhit ng browser, gaya ng scrollbars at form controls.
3. Maglagay ng tahasang background color sa page para sa parehong theme.
4. Kung server-rendered ang app, siguraduhing magkasundo ang server at browser sa paunang theme, kung hindi ay maaaring mag-re-render at kumislap ang page.

Mga halimbawang prompt

Buong setup:

Magdagdag ng dark mode. Una, palitan ang hard-coded na kulay ng theme tokens (background, surface, text, muted text, border, accent) na may light at dark na values. Default ang system setting ng bisita. Magdagdag ng theme switch sa header na may Light, Dark at System na opsyon, itago ang pinili sa localStorage, at i-apply ito gamit ang inline script sa head para walang white flash sa pag-load. Itakda ang color-scheme para sa bawat theme. Panatilihin nang eksakto ang kasalukuyang light design.

Pag-aayos ng natitira:

Suriin ang bawat page sa dark mode at ayusin ang: text na mababa ang contrast (layunin ang hindi bababa sa 4.5:1), hard-coded na puting background, mga border na nawawala, charts na may madilim na text sa madilim na background, at mga logo na nawawala. Huwag galawin ang light theme.

Mga larawan at charts:

Gumamit ng light na bersyon ng logo sa dark mode. Gawing gumagamit ng theme tokens ang chart axes, gridlines at labels. Bigyan ng banayad na border ang mga screenshot sa dark mode para hindi sila maghalo sa background.

Step by step

1. I-audit ang mga kulay. Hanapin ang hard-coded na kulay at palitan ng tokens. Ito ang karamihan ng trabaho.
2. Tukuyin ang dark values para sa bawat token.
3. Sundin ang system gamit ang prefers-color-scheme (o ang default na dark: ng Tailwind).
4. Magdagdag ng toggle kung gusto mo: Light, Dark, System. Itago ang pinili sa browser; para sa mga app na naka-log in, puwede rin itong i-save sa profile ng user.
5. Pigilan ang flash gamit ang inline head script at color-scheme.
6. Suriin ang mga mahihirap na bahagi: logos, icons, larawang may puting background, charts, code blocks, maps, embeds, emails.
7. Subukan ang parehong theme sa desktop at telepono, na naka-light at naka-dark ang system, at pagkatapos ng hard refresh.

Mga karaniwang pagkakamali

• Pagbabaliktad ng lahat. Ang filter na bumabaligtad ng kulay ay sumisira sa mga litrato at brand colors.
• Naiwang hard-coded na kulay. Isang puting card sa madilim na page ay agad na kapansin-pansin.
• Mababang contrast na kulay-abong text. Mukhang sosyal pero bigo sa pagiging madaling basahin.
• White flash sa pag-load. Lalo na kapansin-pansin sa telepono sa gabi.
• Nakakalimutan ang third-party embeds. Maaaring manatiling magaan ang maps, videos at widgets; tingnan kung may dark option ang mga ito.
• Toggle na dalawa lang ang estado. Kapag na-click na ito ng tao, hindi na sila makakabalik sa pagsunod sa system.
• Nasisira ang light theme. Sabihin nang tahasan sa prompt mo na dapat manatiling pareho ang light design.

Checklist

• Lahat ng kulay ay galing sa theme tokens
• Sumusunod sa system setting bilang default
• May opsyonal na toggle na Light, Dark at System, at naaalala
• Walang white flash sa pag-load o refresh
• Nakatakda ang color-scheme para magtugma ang form controls at scrollbars
• Hindi bababa sa 4.5:1 ang text contrast sa parehong theme
• Nasuri sa dark mode ang logos, images, charts at embeds
• Hindi nagbago ang light theme
• Nasubukan sa desktop at telepono

Dark mode sa Mythex

Ang mga app na ginawa sa Mythex ay gumagamit ng Vite, React, TypeScript at Tailwind bilang default, kaya direktang naaangkop ang Tailwind approach sa itaas: i-paste ang full-setup prompt sa chat, pagkatapos suriin ang Preview sa parehong theme at sa laki ng telepono. Ang payo ng Mythex sa design prompting ay pangalanan kung ano ang babaguhin at kung ano ang mananatili, at mahalaga ito rito. Sabihin na dapat manatili ang light theme gaya ng dati. Tingnan ang Design & UI prompts, at mag-rollback gamit ang checkpoint kung pumalpak ang isang pass.

Para sa higit pang paraan ng pagkuha ng tamang itsura, tingnan ang paano magdisenyo ng magandang app gamit ang AI at paano sumulat ng prompts para sa AI app builders.

Mga tanong