Kuidas lisada oma veebilehele või rakendusse tumeda režiim (ilma valguseviteta)

Tumeda režiimi lisamiseks määratle oma värvid nimetatud tokenitena (taust, tekst, pind, äär, rõhuvärv), mitte kõvakooditud väärtustena, anna igale tokenile hele ja tume väärtus ning vaheta neid CSS-i funktsiooniga prefers-color-scheme, et sait järgiks külastaja süsteemiseadet. Kui tahad ka käsitsi lülitit, salvesta valik brauserisse ja rakenda see väikese reasisese skriptiga lehe päises, et laadimisel ei tekiks valget vilkumist. Seejärel kontrolli kontrasti, pilte ja diagramme mõlemas teemas. AI-rakenduste ehitajas saab enamiku sellest teha ühe selge promptiga; kvaliteet tuleb kontrollimisest.

Kaks lähenemist

Enamik rakendusi toimib kõige paremini teisega: järgi vaikimisi süsteemi, lase inimestel seda üle kirjutada.

Alusta värvitokenitega

Tumeda režiimiga on valus tegemist, kui värvid on koodis hajutatud nagu white, #333 ja gray-100. Lihtne on siis, kui iga värv tuleb väikesest nimetatud tokenite komplektist:

Iga komponent kasutab tokenite nimesid. Teema vahetamine tähendab siis ühe väärtuste komplekti vahetamist, mitte iga komponendi muutmist.

Näpunäiteid tumeda paletti jaoks:

• Väldi suurtel aladel puhast musta ja puhast valget; väga tume hall ja väljas valge on lugemiseks kergemad.
• Näita sügavust heledamate pindadega, mitte varjudega — varjud tumedal taustal peaaegu ei paista.
• Tee heledad brändivärvid natuke vähem küllastunuks; need võivad tumedal taustal ebamugavalt helendada.
• Hoia kontrast loetavana. WCAG AA tase nõuab tavalisele tekstile vähemalt 4,5:1 kontrasti. Tumedates teemades ebaõnnestub see sageli hallil nõrgal tekstil.

Tailwind CSS-iga

Tailwind CSS on paljudes AI-ga ehitatud rakendustes vaikimisi stiilitööriist. Vastavalt Tailwindi tumeda režiimi dokumentatsioonile kasutab variant dark: vaikimisi prefers-color-scheme, seega klassid nagu bg-white dark:bg-gray-900 järgivad süsteemiseadet ilma lisatööta.

Käsitsi lüliti jaoks Tailwind v4-ga näitab dokumentatsioon, kuidas vahetada variant klassipõhiseks ülemisel elemendil:

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

Seejärel lisab või eemaldab rakendus juurelemendilt klassi dark. Dokumentatsioon soovitab ka päises reasisest skripti, mis rakendab salvestatud valiku (või süsteemiseade) enne lehe joonistamist — just nii väldid vilkumist.

Valge vilkumise vältimine

Vilkumine tekib seetõttu, et leht joonistatakse heledas režiimis, seejärel laeb JavaScript, loeb salvestatud valiku ja lülitub tumedaks. Parandus:

1. Pane väike reasisene skript lehe päisesse, mis loeb salvestatud teema ja seab klassi juurelemendile enne, kui midagi renderdatakse.
2. Sea iga teema jaoks color-scheme CSS-i omadus, et brauseri joonistatud osad (kerimisribad, vormielemendid) sobiksid.
3. Anna lehele mõlemas teemas selge taustavärv.
4. Kui rakendus renderdatakse serveris, veendu, et server ja brauser nõustuvad algteema osas, muidu võib leht uuesti renderduda ja vilkuda.

Näidispromptid

Täielik seadistus:

Lisa tume režiim. Esmalt asenda kõvakooditud värvid teematokenitega (taust, pind, tekst, hall tekst, äär, rõhuvärv) koos heleda ja tumeda väärtusega. Vaikimisi järgi külastaja süsteemiseadet. Lisa päisesse teema lüliti valikutega Hele, Tume ja Süsteem, salvesta valik localStorage'i ja rakenda see päises oleva reasisese skriptiga, et laadimisel ei tekiks valget vilkumist. Sea iga teema jaoks color-scheme. Hoia praegune hele kujundus täpselt samana.

Jäänud asjade parandamine:

Kontrolli iga lehte tumedas režiimis ja paranda: madala kontrastiga tekst (sihi vähemalt 4,5:1), kõvakooditud valged taustad, kadunud servad, diagrammid tumedal taustal tumedate siltidega ja logod, mis kaovad. Ära muuda heledat teemat.

Pildid ja diagrammid:

Kasuta tumedas režiimis logo heledat versiooni. Tee diagrammi teljed, ruudustik ja sildid teematokenite kaudu. Anna ekraanipiltidele tumedas režiimis peen äär, et need ei sulanduks taustaga.

Samm-sammult

1. Audiit värvidest. Leia kõvakooditud värvid ja asenda need tokenitega. See on enamik tööst.
2. Määra tumedad väärtused igale tokenile.
3. Järgi süsteemi prefers-color-scheme-iga (või Tailwindi vaikimisi dark:-ga).
4. Lisa lüliti, kui tahad: Hele, Tume, Süsteem. Salvesta valik brauserisse; sisselogitud rakenduste puhul saad selle salvestada ka kasutaja profiili.
5. Väldi vilkumist päises oleva reaskriptiga ja color-scheme-iga.
6. Kontrolli keerukamaid kohti: logod, ikoonid, pildid valgete taustadega, diagrammid, koodiplokid, kaardid, sisestused ja e-kirjad.
7. Testi mõlemat teemat lauaarvutis ja telefonis, süsteemi seatuna heledaks ja tumedaks ning pärast kõva värskendamist.

Levinud vead

• Kõige pööramine. Filter, mis pöörab värve, rikub fotod ja brändivärvid.
• Kõvakooditud värvid jäetud alles. Üks valge kaart tumedal lehel paistab kohe silma.
• Madala kontrastiga hall tekst. Näeb stiilne välja, kuid ei vasta loetavusele.
• Valge vilkumine laadimisel. Eriti märgatav telefonides öösel.
• Kolmanda osapoole sisestuste unustamine. Kaardid, videod ja vidinad võivad jääda heledaks; kontrolli, kas neil on tume valik.
• Kahe olekuga lüliti. Kui keegi klõpsab seda, ei saa ta enam süsteemi järgimisele tagasi minna.
• Hele teema rikkumine. Ütle promptis selgelt, et heledat kujundust tuleb hoida samana.

Kontrollnimekiri

• Kõik värvid tulevad teematokenitest
• Vaikimisi järgitakse süsteemiseadet
• Valikuline lüliti valikutega Hele, Tume ja Süsteem, mis jääb meelde
• Laadimisel või värskendamisel ei teki valget vilkumist
• color-scheme on seatud, et vormielemendid ja kerimisribad sobiksid
• Tekstikontrast on mõlemas teemas vähemalt 4,5:1
• Logod, pildid, diagrammid ja sisestused on tumedas režiimis üle vaadatud
• Hele teema on muutumata
• Testitud lauaarvutis ja telefonis

Tume režiim Mythexis

Mythexi peal ehitatud rakendused kasutavad vaikimisi Vite'i, Reacti, TypeScripti ja Tailwindi, seega kehtib ülal kirjeldatud Tailwindi lähenemine otse: kleebi täieliku seadistuse prompt vestlusse, seejärel kontrolli eelvaates mõlemat teemat ja telefonisuurust. Mythexi disainiprompti soovitus on nimetada, mida muuta ja mida hoida, mis siin tähtis on — ütle, et hele teema peab jääma samaks. Vt Disaini ja kasutajaliidese promptid ja taasta kontrollpunktiga, kui käik läheb valesti.

Rohkem sellest, kuidas kujundust õigeks saada, vaata kuidas disainida AI-ga hea välimusega rakendus ja kuidas kirjutada prompte AI-rakenduste ehitajatele.

Küsimused