Kā pievienot tumšo režīmu savai vietnei vai lietotnei (bez mirgoņas)

Lai pievienotu tumšo režīmu, definē savas krāsas kā nosaukti marķieri (fons, teksts, virsma, robeža, akcents), nevis cietkodētas vērtības, katram marķierim dod gaišu un tumšu vērtību un pārslēdz starp tām ar CSS prefers-color-scheme mediju funkciju, lai vietne seko apmeklētāja sistēmas iestatījumam. Ja vēlies arī manuālu slēdzi, glabā izvēli pārlūkprogrammā un lieto to ar mazu inline skriptu lapas head daļā, lai ielādes brīdī nebūtu baltas mirgoņas. Pēc tam pārbaudi kontrastu, attēlus un diagrammas abos motīvos. AI lietotņu veidotājā viens skaidrs pieprasījums var izdarīt lielāko daļu; kvalitāte rodas pārbaudē.

Divas pieejas

Lielākā daļa lietotņu vislabāk darbojas ar otro: pēc noklusējuma respektē sistēmu, bet ļauj cilvēkiem to pārrakstīt.

Sāc ar krāsu marķieriem

Tumšais režīms sagādā grūtības, kad krāsas izkaisītas kodā kā white, #333 un gray-100. Tas ir viegli, kad katra krāsa nāk no neliela nosaukto marķieru kopuma:

Katrs komponents izmanto marķieru nosaukumus. Motīva maiņa tad nozīmē nomainīt vienu vērtību kopu, nevis rediģēt katru komponentu.

Padomi tumšajai paletei:

• Izvairies no tīri melna un tīri balta lielām virsmām; ļoti tumšs pelēks un nedaudz balts toņi ir vieglāk lasāmi.
• Rādi dziļumu ar gaišākām virsmām, nevis ēnām — ēnas uz tumša fona gandrīz neredzamas.
• Nedaudz samazini spilgto zīmola krāsu piesātinājumu; tās uz tumša fona var neērti spīdēt.
• Uzturi lasāmu kontrastu. WCAG AA līmenis prasa vismaz 4,5:1 kontrastu parastam tekstam. Pelēkais teksts bieži neiztur šo prasību tumšos motīvos.

Ar Tailwind CSS

Tailwind ir noklusējuma stilu rīks daudzās AI veidotās lietotnēs. Saskaņā ar Tailwind tumšā režīma dokumentāciju dark: variants pēc noklusējuma izmanto prefers-color-scheme, tāpēc klases, piemēram, bg-white dark:bg-gray-900, seko sistēmas iestatījumam bez papildu darba.

Manuālam slēdzim Tailwind v4 dokumentācija rāda, kā mainīt variantu uz klasi vecāka elementā:

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

Pēc tam lietotne pievieno vai noņem klasi dark saknes elementā. Dokumentācija arī iesaka inline skriptu head daļā, kas pielieto saglabāto izvēli (vai sistēmas iestatījumu) pirms lapas zīmēšanas — tieši tā izvairies no mirgoņas.

Baltās mirgoņas novēršana

Mirgošana notiek tāpēc, ka lapa uzzīmējas gaišajā režīmā, tad ielādējas JavaScript, nolasa saglabāto izvēli un pārslēdzas uz tumšo. Labojums:

1. Ievieto mazu inline skriptu lapas head daļā, kas nolasa saglabāto motīvu un iestata klasi saknes elementā pirms jebkā renderēšanas.
2. Iestati CSS īpašību color-scheme katram motīvam, lai pārlūka zīmētās daļas (ritjoslas, formas vadīklas) saskanētu.
3. Dod lapai skaidru fona krāsu abos motīvos.
4. Ja lietotne tiek renderēta serverī, pārliecinies, ka serveris un pārlūkprogramma vienojas par sākotnējo motīvu, citādi lapa var pārzīmēties un mirgot.

Uzvedņu piemēri

Pilna iestatīšana:

Pievieno tumšo režīmu. Vispirms aizstāj cietkodētās krāsas ar motīva marķieriem (fons, virsma, teksts, pelēkais teksts, robeža, akcents) ar gaišām un tumšām vērtībām. Pēc noklusējuma seko apmeklētāja sistēmas iestatījumam. Pievieno motīva slēdzi galvenē ar opcijām Gaišs, Tumšs un Sistēma, atceries izvēli localStorage un pielieto to ar inline skriptu head daļā, lai ielādes brīdī nebūtu baltas mirgoņas. Iestati color-scheme katram motīvam. Saglabā pašreizējo gaišo dizainu tieši tādu, kāds tas ir.

Atlikušā labošana:

Pārbaudi katru lapu tumšajā režīmā un labo: teksts ar zemu kontrastu (mērķis vismaz 4,5:1), cietkodēti balti fona, robežas, kas pazūd, diagrammas ar tumšu tekstu uz tumša fona un logotipi, kas izzūd. Nemaini gaišo motīvu.

Attēli un diagrammas:

Tumšajā režīmā izmanto logotipa gaišo versiju. Padari diagrammu asis, režģa līnijas un etiķetes par motīva marķieriem. Dod ekrānuzņēmumiem smalku robežu tumšajā režīmā, lai tie nesaplūst ar fonu.

Soli pa solim

1. Revidē krāsas. Atrodi cietkodētās krāsas un aizstāj tās ar marķieriem. Tas ir lielākā daļa darba.
2. Definē tumšās vērtības katram marķierim.
3. Seko sistēmai ar prefers-color-scheme (vai Tailwind noklusējuma dark:).
4. Pievieno slēdzi, ja vēlies: Gaišs, Tumšs, Sistēma. Glabā izvēli pārlūkprogrammā; lietotnēs ar pieteikšanos to var saglabāt arī lietotāja profilā.
5. Novērs mirgošanu ar inline head skriptu un color-scheme.
6. Pārbaudi sarežģītās vietas: logotipus, ikonas, attēlus ar baltiem foniem, diagrammas, koda blokus, kartes, iegulumus, e-pastus.
7. Pārbaudi abus motīvus darbvirsmā un telefonā, ar sistēmu iestatītu uz gaišu un tumšu, un pēc pilnas pārlādēšanas.

Biežākās kļūdas

• Viss tiek apgriezts. Filtrs, kas apgriež krāsas, sabojā fotogrāfijas un zīmola krāsas.
• Atstātas cietkodētas krāsas. Viena balta kartīte tumšā lapā uzreiz krīt acīs.
• Zema kontrasta pelēks teksts. Izskatās stilīgi, bet nav lasāms.
• Baltā mirgošana ielādes brīdī. Īpaši manāma telefonos naktī.
• Aizmirsti trešo pušu iegulumi. Kartes, video un logrīki var palikt gaiši; pārbaudi, vai tiem ir tumšā režīma opcija.
• Slēdzis ar tikai diviem stāvokļiem. Kad kāds to noklikšķina, viņš vairs nevar atgriezties pie sistēmas sekošanas.
• Gaišā motīva salaušana. Uzvednē skaidri pasaki, ka gaišajam dizainam jāpaliek nemainītam.

Kontrolsaraksts

• Visas krāsas nāk no motīva marķieriem
• Pēc noklusējuma seko sistēmas iestatījumam
• Izvēles slēdzis Gaišs, Tumšs un Sistēma, atcerēts
• Nav baltas mirgoņas ielādes vai pārlādēšanas brīdī
• color-scheme iestatīts, lai formas vadīklas un ritjoslas saskanētu
• Teksta kontrasts vismaz 4,5:1 abos motīvos
• Logotipi, attēli, diagrammas un iegulumi pārbaudīti tumšajā režīmā
• Gaišais motīvs nemainīts
• Pārbaudīts darbvirsmā un telefonā

Tumšais režīms ar Mythex

Lietotnes, kas veidotas ar Mythex, pēc noklusējuma izmanto Vite, React, TypeScript un Tailwind, tāpēc iepriekš aprakstītā Tailwind pieeja tieši attiecas uz tām: ieliec pilnās iestatīšanas uzvedni tērzēšanā, pēc tam pārbaudi priekšskatījumu abos motīvos un telefona izmērā. Mythex dizaina uzvedņu ieteikums ir nosaukt, kas jāmaina un kas jāsaglabā, un tas šeit ir svarīgi — saki, ka gaišajam motīvam jāpaliek tādam, kāds tas ir. Skat. Dizaina un UI uzvednes, un, ja kāda kārta noiet greizi, atgriezies ar kontrolpunktu.

Vairāk par to, kā iegūt pareizu izskatu, skat. kā izveidot labi izskatīgu lietotni ar MI un kā rakstīt uzvednes MI lietotņu veidotājiem.

Jautājumi