Si të shtoni dark mode në sajtin ose aplikacionin tuaj (pa e shkëlqyer të bardhën)

Për të shtuar dark mode, përcaktoni ngjyrat tuaja si token-ë me emër (sfondi, teksti, sipërfaqja, kufiri, theksi) në vend të vlerave të fiksuara, jepni çdo token-i një vlerë të çelët dhe një të errët, dhe kaloni mes tyre me veçorinë e medias CSS prefers-color-scheme, që sajti të ndjekë cilësimin e sistemit të vizitorit. Nëse dëshironi edhe një çelës manual, ruajeni zgjedhjen në shfletues dhe aplikojeni me një skriptim të vogël inline në head të faqes, që të mos ketë ekran të bardhë në ngarkim. Pastaj kontrolloni kontrastin, imazhet dhe grafikët në të dyja temat. Në një ndërtues aplikacionesh me AI, një kërkesë e qartë mund ta bëjë pjesën më të madhe të punës; kontrollimi është aty ku qëndron cilësia.

Dy qasje

Shumica e aplikacioneve funksionojnë më mirë me të dytën: respektojnë sistemin si parazgjedhje, dhe lejojnë njerëzit ta mbivendosin.

Filloni me token-ë ngjyrash

Dark mode është i dhimbshëm kur ngjyrat janë shpërndarë në kod si white, #333 dhe gray-100. Bëhet i lehtë kur çdo ngjyrë vjen nga një grup i vogël token-ësh me emër:

Çdo komponent përdor emrat e token-ëve. Ndërrimi i temës atëherë do të thotë të ndërroni një grup vlerash, jo të redaktoni çdo komponent.

Këshilla për paletën e errët:

• Shmangni të zezën dhe të bardhën e pastër për sipërfaqe të mëdha; gri shumë e errët dhe e bardha e thyer janë më të lehta për t'u lexuar.
• Tregoni thellësinë me sipërfaqe më të ndritshme, jo me hije — hijet pothuajse nuk duken në sfond të errët.
• Zbutni pak ngjyrat e markës shumë të ndritshme; mund të shkëlqejnë në mënyrë të pakëndshme mbi sfond të errët.
• Mbajeni kontrastin të lexueshëm. Niveli AA i WCAG kërkon të paktën 4.5:1 kontrast për tekst normal. Teksti gri i zbehtë shpesh dështon këtë në temat e errëta.

Me Tailwind CSS

Tailwind është mjeti kryesor i stilimit në shumë aplikacione të ndërtuara me AI. Sipas dokumentacionit të dark mode të Tailwind, varianti dark: përdor prefers-color-scheme si parazgjedhje, kështu që klasa si bg-white dark:bg-gray-900 ndjekin cilësimin e sistemit pa asnjë punë shtesë.

Për një çelës manual në Tailwind v4, dokumentacioni tregon ndërrimin e variantit në një klasë në një element prind:

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

Pastaj aplikacioni shton ose heq klasën dark në elementin rrënjë. Dokumentacioni sugjeron gjithashtu një skriptim inline në head që aplikon zgjedhjen e ruajtur (ose cilësimin e sistemit) përpara se faqja të vizatohet — pikërisht kështu shmanget ekrani i bardhë.

Shmangia e ekranit të bardhë

Ekrani i bardhë ndodh sepse faqja vizatohet në modalitetin e çelët, pastaj ngarkohet JavaScript, lexon zgjedhjen e ruajtur, dhe kalon në të errët. Zgjidhja:

1. Vendosni një skriptim të vogël inline në head të faqes që lexon temën e ruajtur dhe e vendos klasën në elementin rrënjë përpara se të vizatohet diçka.
2. Vendosni vetinë CSS color-scheme për çdo temë, që pjesët e vizatuara nga shfletuesi (shiritat e lëvizjes, kontrollet e formularit) të përputhen.
3. Jepni faqes një ngjyrë sfondi të qartë në të dyja temat.
4. Nëse aplikacioni renderohet në server, sigurohuni që serveri dhe shfletuesi bien dakord për temën fillestare, ose faqja mund të riveçohet dhe të dridhet.

Shembuj kërkesash

Një konfigurim i plotë:

Shto dark mode. Së pari zëvendëso ngjyrat e fiksuara me token-ë të temës (sfondi, sipërfaqja, teksti, teksti i zbehtë, kufiri, theksi) me vlera të çelëta dhe të errëta. Parazgjedhja të jetë cilësimi i sistemit të vizitorit. Shto një ndërrues tema në header me opsionet Light, Dark dhe System, mbaj mend zgjedhjen në localStorage, dhe aplikoje me një skriptim inline në head që të mos ketë ekran të bardhë në ngarkim. Vendos color-scheme për çdo temë. Mbaj dizajnin aktual të çelët saktësisht siç është.

Rregullimi i asaj që ka mbetur:

Kontrollo çdo faqe në dark mode dhe rregullo: tekstin me kontrast të ulët (synoni të paktën 4.5:1), sfondet e bardha të fiksuara, kufijtë që zhduken, grafikët me tekst të errët mbi sfond të errët, dhe logot që zhduken. Mos e ndrysho temën e çelët.

Imazhet dhe grafikët:

Përdor një version të çelët të logos në dark mode. Bëj që boshtet, rrjetat dhe etiketat e grafikëve të përdorin token-ët e temës. Jepu screenshot-eve një kufi të hollë në dark mode, që të mos përzihen me sfondin.

Hap pas hapi

1. Auditoni ngjyrat. Gjeni ngjyrat e fiksuara dhe zëvendësojini me token-ë. Kjo është pjesa më e madhe e punës.
2. Përcaktoni vlerat e errëta për çdo token.
3. Ndiqni sistemin me prefers-color-scheme (ose parazgjedhjen dark: të Tailwind).
4. Shtoni një ndërrues nëse dëshironi: Light, Dark, System. Ruajeni zgjedhjen në shfletues; për aplikacionet me hyrje mund ta ruani edhe në profilin e përdoruesit.
5. Parandaloni ekranin e bardhë me skriptimin inline në head dhe color-scheme.
6. Kontrolloni pjesët e vështira: logot, ikonat, imazhet me sfond të bardhë, grafikët, blloqet e kodit, hartat, trupat dhe email-et.
7. Testoni të dyja temat në desktop dhe telefon, me sistemin të vendosur në të çelët dhe në të errët, dhe pas rifreskimit të plotë.

Gabimet më të shpeshta

• Ndryshimi i çdo gjëje. Një filtër që invert-on ngjyrat prish fotografitë dhe ngjyrat e markës.
• Ngjyra të fiksuara të lëna pas. Një kartë e bardhë në një faqe të errët del menjëherë në sy.
• Tekst gri me kontrast të ulët. Duket stilor, por dështon në lexueshmëri.
• Ekran i bardhë në ngarkim. Veçanërisht i dukshëm në telefona natën.
• Harrimi i trupave të palëve të treta. Hartat, videot dhe widget-et mund të mbeten të çelëta; kontrolloni nëse kanë opsion të errët.
• Ndërrues me vetëm dy gjendje. Pasi dikush klikon, nuk mund të kthehet te ndjekja e sistemit.
• Prishja e temës së çelët. Thoni qartë në kërkesë që dizajni i çelët duhet të mbetet i njëjtë.

Listë kontrolli

• Të gjitha ngjyrat vijnë nga token-ët e temës
• Ndjek cilësimin e sistemit si parazgjedhje
• Ndërrues opsional me Light, Dark dhe System, i mbajtur mend
• Asnjë ekran i bardhë në ngarkim ose rifreskim
• color-scheme i vendosur që kontrollet e formularit dhe shiritat e lëvizjes të përputhen
• Kontrasti i tekstit të paktën 4.5:1 në të dyja temat
• Logot, imazhet, grafikët dhe trupat të kontrolluar në dark mode
• Tema e çelët e pandryshuar
• Testuar në desktop dhe telefon

Dark mode me Mythex

Aplikacionet e ndërtuara në Mythex përdorin Vite, React, TypeScript dhe Tailwind si parazgjedhje, kështu që qasja me Tailwind më sipër zbatohet drejtpërdrejt: ngjitni kërkesën e plotë të konfigurimit në chat, pastaj kontrolloni Preview në të dyja temat dhe në madhësinë e telefonit. Këshilla e Mythex për dizajnin është të emërtoni çfarë të ndryshohet dhe çfarë të mbahet, gjë që ka rëndësi këtu — thoni që tema e çelët duhet të mbetet siç është. Shihni Dizajni dhe kërkesat për UI, dhe kthejeni me një checkpoint nëse një kalim shkon keq.

Për më shumë rreth marrjes së pamjes së duhur, shihni si të dizajnoni një aplikacion të bukur me AI dhe si të shkruani kërkesa për ndërtuesit e aplikacioneve me AI.

Pyetje