Tumman teeman lisääminen verkkosivustoosi tai sovellukseesi (ilman välähdystä)

Tumman teeman lisääminen tarkoittaa, että määrittelet värisi nimettyinä tokeneina (tausta, teksti, pinta, reunus, korostus) kovakoodattujen arvojen sijaan, annat jokaiselle tokenille vaalean ja tumman arvon ja vaihdat niiden välillä CSS:n prefers-color-scheme-ominaisuudella, jotta sivusto seuraa kävijän järjestelmän asetusta. Jos haluat myös manuaalisen kytkimen, tallenna valinta selaimeen ja ota se käyttöön pienellä inline-skriptillä head-osiossa, jotta latauksessa ei ole valkoista välähdystä. Tarkista sen jälkeen kontrasti, kuvat ja kaaviot molemmissa teemoissa. Tekoälyavusteisessa sovelluskehittäjässä yksi selkeä kehote tekee suurimman osan tästä; laatu syntyy tarkistamisesta.

Kaksi lähestymistapaa

Useimmille sovelluksille toimii parhaiten jälkimmäinen: kunnioita järjestelmää oletuksena, mutta anna ihmisten ohittaa se.

Aloita väritokeneista

Tumma teema on tuskallinen, jos värit ovat hajallaan koodissa muodossa white, #333 ja gray-100. Se on helppo, kun jokainen väri tulee pienestä joukosta nimettyjä tokeneita:

Jokainen komponentti käyttää tokenien nimiä. Teeman vaihtaminen tarkoittaa silloin yhden arvojoukon vaihtamista, ei jokaisen komponentin muokkaamista.

Vinkkejä tumman paletin suunnitteluun:

• Vältä täyttä mustaa ja täyttä valkoista suurilla alueilla; hyvin tumma harmaa ja hieman valkoinen ovat helpompia lukea.
• Näytä syvyys vaaleammilla pinnoilla, ei varjoilla — varjot eivät juuri näy tummilla taustoilla.
• Vaimenna kirkkaita brändivärejä hieman; ne voivat hehkua epämiellyttävästi tummalla taustalla.
• Pidä kontrasti luettavana. WCAG:n AA-taso vaatii vähintään 4,5:1 kontrastin tavalliselle tekstille. Vaimennettu harmaa teksti epäonnistuu usein tummissa teemoissa.

Tailwind CSS:n kanssa

Tailwind on oletustyökalu monissa tekoälyllä rakennetuissa sovelluksissa. Tailwindin tumman teeman dokumentaation mukaan dark:-variantti käyttää oletuksena prefers-color-scheme-ominaisuutta, joten luokat kuten bg-white dark:bg-gray-900 seuraavat järjestelmän asetusta ilman lisätyötä.

Manuaalista kytkintä varten Tailwind v4:ssä dokumentaatio näyttää variantin vaihtamisen luokaksi vanhemmalla elementillä:

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

Sen jälkeen sovellus lisää tai poistaa dark-luokan juurielementiltä. Dokumentaatio ehdottaa myös head-osion inline-skriptiä, joka ottaa tallennetun valinnan (tai järjestelmän asetuksen) käyttöön ennen kuin sivu piirtyy — juuri näin välähdys vältetään.

Valkoisen välähdyksen välttäminen

Välähdys syntyy, koska sivu piirtyy vaalean teeman mukaan, minkä jälkeen JavaScript latautuu, lukee tallennetun valinnan ja vaihtaa tummaan. Korjaus:

1. Aseta pieni inline-skripti head-osioon, joka lukee tallennetun teeman ja asettaa luokan juurielementille ennen kuin mitään piirretään.
2. Aseta jokaiselle teemalle color-scheme-CSS-ominaisuus, jotta selaimen piirtämät osat (vierityspalkit, lomakekontrollit) vastaavat teemaa.
3. Anna sivulle selkeä taustaväri molemmissa teemoissa.
4. Jos sovellus renderöidään palvelimella, varmista että palvelin ja selain ovat samaa mieltä alkuteemasta, muuten sivu voi renderöityä uudelleen ja vilkkua.

Esimerkkikehotteita

Koko asetus:

Lisää tumma teema. Korvaa ensin kovakoodatut värit teematokeneilla (tausta, pinta, teksti, vaimennettu teksti, reunus, korostus), joilla on vaalea ja tumma arvo. Oletus on kävijän järjestelmän asetus. Lisää teemakytkin otsikkoon, jossa ovat vaihtoehdot Vaalea, Tumma ja Järjestelmä, muista valinta localStorageen ja ota se käyttöön inline-skriptillä head-osiossa, jotta latauksessa ei ole valkoista välähdystä. Aseta color-scheme kummallekin teemalle. Pidä nykyinen vaalea ulkoasu täsmälleen ennallaan.

Jäljellä olevan korjaus:

Tarkista jokainen sivu tummassa teemassa ja korjaa: heikko kontrastinen teksti (tavoite vähintään 4,5:1), kovakoodatut valkoiset taustat, katoavat reunukset, kaaviot, joissa on tumma teksti tummalla taustalla, ja katoavat logot. Älä muuta vaaleaa teemaa.

Kuvat ja kaaviot:

Käytä tummassa teemassa logon vaaleaa versiota. Tee kaaviojen akseleista, ruudukoista ja tunnisteista teematokeneita käyttäviä. Anna kuvakaappauksille hienovarainen reunus tummassa teemassa, jotta ne eivät sulaudu taustaan.

Vaihe vaiheelta

1. Tarkista värit. Etsi kovakoodatut värit ja korvaa ne tokeneilla. Tämä on suurin osa työstä.
2. Määrittele tumma arvo jokaiselle tokenille.
3. Seuraa järjestelmää prefers-color-scheme-ominaisuudella (tai Tailwindin oletuksella dark:).
4. Lisää kytkin, jos haluat sellaisen: Vaalea, Tumma, Järjestelmä. Tallenna valinta selaimeen; kirjautuneille sovelluksille voit tallentaa sen myös käyttäjäprofiiliin.
5. Estä välähdys head-osion inline-skriptillä ja color-scheme-ominaisuudella.
6. Tarkista hankalat kohdat: logot, kuvakkeet, valkoisella taustalla olevat kuvat, kaaviot, koodilohkot, kartat, upotukset, sähköpostit.
7. Testaa molemmat teemat työpöydällä ja puhelimella, järjestelmän ollessa sekä vaalea että tumma, ja kovan päivityksen jälkeen.

Yleisimmät virheet

• Kaiken kääntäminen. Värejä kääntävä suodatin pilaa valokuvat ja brändivärit.
• Kovakoodatut värit jäävät jäljelle. Yksi valkoinen kortti tummalla sivulla erottuu heti.
• Heikko kontrastinen harmaa teksti. Näyttää tyylikkäältä, mutta ei ole luettavaa.
• Valkoinen välähdys latauksessa. Erityisen huomattava puhelimilla yöllä.
• Kolmannen osapuolen upotusten unohtaminen. Kartat, videot ja widgetit voivat jäädä vaaleiksi; tarkista, onko niissä tumma vaihtoehto.
• Kytkin, jossa on vain kaksi tilaa. Kun joku klikkaa sitä, hän ei pääse takaisin järjestelmän seuraamiseen.
• Vaalean teeman rikkominen. Sano kehotteessa selvästi, että vaalean teeman ulkoasun pitää pysyä samana.

Tarkistuslista

• Kaikki värit tulevat teematokeneista
• Seuraa järjestelmän asetusta oletuksena
• Valinnainen kytkin Vaalea, Tumma ja Järjestelmä, muistetaan
• Ei valkoista välähdystä latauksessa tai päivityksessä
• color-scheme asetettu, jotta lomakekontrollit ja vierityspalkit vastaavat teemaa
• Tekstin kontrasti vähintään 4,5:1 molemmissa teemoissa
• Logot, kuvat, kaaviot ja upotukset tarkistettu tummassa teemassa
• Vaalea teema ennallaan
• Testattu työpöydällä ja puhelimella

Tumma teema Mythexissä

Mythexilla rakennetut sovellukset käyttävät oletuksena Viteä, Reactia, TypeScriptiä ja Tailwindia, joten yllä oleva Tailwind-lähestymistapa pätee suoraan: liitä koko asetuksen kehote chatiin, ja tarkista sitten Preview molemmissa teemoissa ja puhelinkoossa. Mythexin suunnittelukehotteiden ohje on nimetä, mitä muutetaan ja mitä säilytetään, ja tässä se on tärkeää — kerro, että vaalean teeman pitää pysyä ennallaan. Katso Design & UI -kehotteet ja palauta tarvittaessa tarkistuspisteestä, jos jokin kierros menee pieleen.

Lisää ulkoasun saamisesta oikeaksi: miten suunnitella hyvältä näyttävä sovellus tekoälyllä ja miten kirjoittaa kehotteita tekoälyn sovelluskehittäjille.

Kysymykset