Hvernig á að bæta dökkri stillingu (dark mode) við vefsíðu eða app (án hvítrar glampa)

Til að bæta við dökkri stillingu skilgreinirðu litina þína sem nefnd tákn (bakgrunn, texta, yfirborð, ramma, áherslu) í stað fastkóðaðra gilda, gefur hverju tákni ljós og dökk gildi, og skiptir á milli þeirra með CSS-eiginleikanum prefers-color-scheme svo síðan fylgi kerfisstillingu gestsins. Ef þú vilt líka handvirkan rofa skaltu geyma valið í vafranum og beita því með litlu innbyggðu skripti í haus síðunnar svo ekki komi hvít glampa við hleðslu. Athugaðu síðan birtuskil, myndir og rit í báðum þemum. Í gervigreindarsmíðatóli getur ein skýr fyrirmæli gert mest af þessu; athugunin er þar sem gæðin koma fram.

Tvær nálganir

Flest öpp gera best með þeirri seinni: virða kerfisstillinguna sem sjálfgefna, og leyfa fólki að yfirskrifa hana.

Byrjaðu á litatáknum

Dökk stilling er sársaukafull þegar litir eru dreifðir um kóðann sem white, #333 og gray-100. Hún er auðveld þegar hver litur kemur úr litlu safni nefndra tákna:

Hver íhlutur notar nöfn táknanna. Að skipta um þema felur þá í sér að skipta út einu settir gilda, ekki breyta hverjum íhlut.

Ráð fyrir dökka litapallettuna:

• Forðastu hreinan svartan og hreinan hvítan á stórum svæðum; mjög dökkgrátt og hálfhvítt er auðveldara að lesa.
• Sýndu dýpt með ljósari yfirborðum, ekki skuggum — skuggar sjást varla á dökkum bakgrunni.
• Dragðu aðeins úr mettun bjartra vörumerkjalita; þeir geta glóað óþægilega á dökkum bakgrunni.
• Haltu birtuskilum læsilegum. WCAG-stig AA krefst að minnsta kosti 4,5:1 birtuskila fyrir venjulegan texta. Dauf grá texti fellur oft á þessu í dökkum þemum.

Með Tailwind CSS

Tailwind er sjálfgefið stílatól í mörgum gervigreindarsmíðuðum öppum. Samkvæmt skjölum Tailwind um dökka stillingu notar dark:-afbrigðið prefers-color-scheme sjálfgefið, svo flokkar eins og bg-white dark:bg-gray-900 fylgja kerfisstillingunni án frekari vinnu.

Fyrir handvirkan rofa í Tailwind v4 sýna skjölin að breyta afbrigðinu í klasa á foreldrisþætti:

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

Síðan bætir appið dark-klasanum við eða fjarlægir hann af rótarþættinum. Skjölin stinga líka upp á innbyggðu skripti í hausnum sem beitir vistaða valinu (eða kerfisstillingunni) áður en síðan er teiknuð — sem er nákvæmlega leiðin til að forðast glampann.

Að forðast hvíta glampann

Glampinn gerist vegna þess að síðan er teiknuð í ljósri stillingu, síðan hleður JavaScript, les vistaða valið og skiptir yfir í dökkt. Lagfæringin:

1. Settu lítið innbyggt skript í haus síðunnar sem les vistaða þemað og setur klasann á rótarþáttinn áður en nokkuð er teiknað.
2. Stilltu color-scheme CSS-eiginleikann fyrir hvert þema svo þá hluta sem vafrinn teiknar (skrunstikur, eyðublaðsstýringar) passi.
3. Gefðu síðunni skýran bakgrunnslit í báðum þemum.
4. Ef appið er birt á þjóninum skaltu ganga úr skugga um að þjónninn og vafrinn séu sammála um upphafsþemað, annars getur síðan endurteiknast og blikkað.

Dæmi um fyrirmæli

Full uppsetning:

Bættu við dökkri stillingu. Skiptu fyrst út föstum litum fyrir þematákn (bakgrunn, yfirborð, texta, daufan texta, ramma, áherslu) með ljósum og dökkum gildum. Sjálfgefið er kerfisstilling gestsins. Bættu við þemarofa í hausnum með valmöguleikunum Ljóst, Dökkt og Kerfi, geymdu valið í localStorage og beittu því með innbyggðu skripti í hausnum svo ekki komi hvít glampa við hleðslu. Stilltu color-scheme fyrir hvert þema. Haltu núverandi ljósu hönnun nákvæmlega eins.

Að laga það sem eftir er:

Athugaðu hverja síðu í dökkri stillingu og lagfærðu: texta með lágum birtuskilum (stefndu að minnsta kosti 4,5:1), fasta hvíta bakgrunna, ramma sem hverfa, myndrit með dökkum texta á dökkum bakgrunni, og lógó sem hverfa. Ekki breyta ljósa þemanu.

Myndir og myndrit:

Notaðu ljósa útgáfu af lógóinu í dökkri stillingu. Láttu ása, rist og texta myndrits nota þematákn. Gefðu skjáskotum fíngerðan ramma í dökkri stillingu svo þau renni ekki saman við bakgrunninn.

Skref fyrir skref

1. Úttekt á litum. Finndu fastkóðaða liti og skiptu þeim út fyrir tákn. Þetta er mestur hluti vinnunnar.
2. Skilgreindu dökk gildi fyrir hvert tákn.
3. Fylgdu kerfinu með prefers-color-scheme (eða sjálfgefnu dark: Tailwind).
4. Bættu við rofa ef þú vilt einn: Ljóst, Dökkt, Kerfi. Geymdu valið í vafranum; fyrir innskráð öpp er líka hægt að vista það í notandasniðinu.
5. Komdu í veg fyrir glampann með innbyggðu skriptinu í hausnum og color-scheme.
6. Athugaðu erfiðu hlutana: lógó, tákn, myndir með hvítum bakgrunni, myndrit, kóðablokkir, kort, innfellingar, tölvupósta.
7. Prófaðu bæði þemun í tölvu og síma, með kerfið stillt á ljóst og dökkt, og eftir harða endurhleðslu.

Algeng mistök

• Að snúa öllu við. Sía sem snýr litum við eyðileggur ljósmyndir og vörumerkjaliti.
• Fastir litir skildir eftir. Eitt hvítt kort á dökkri síðu stingur strax í augun.
• Dauf grá texti með lágum birtuskilum. Lítur stílhreint út en stenst ekki læsileika.
• Hvítur glampi við hleðslu. Sérstaklega áberandi í símum á nóttunni.
• Gleymdar innfellingar frá þriðja aðila. Kort, myndbönd og viðmót gætu verið áfram ljós; athugaðu hvort þau hafi dökkan valkost.
• Rofi með aðeins tveimur stöðum. Þegar einhver smellir á hann kemst hann ekki aftur í að fylgja kerfinu.
• Að brjóta ljósa þemað. Segðu skýrt í fyrirmælunum að ljósa hönnunin eigi að haldast óbreytt.

Gátlisti

• Allir litir koma úr þematáknum
• Fylgir kerfisstillingunni sjálfgefið
• Valfrjáls rofi með Ljóst, Dökkt og Kerfi, geymdur
• Enginn hvítur glampi við hleðslu eða endurhleðslu
• color-scheme stillt svo eyðublaðsstýringar og skrunstikur passi
• Birtuskil texta að minnsta kosti 4,5:1 í báðum þemum
• Lógó, myndir, myndrit og innfellingar athuguð í dökkri stillingu
• Ljósa þemað óbreytt
• Prófað í tölvu og síma

Dökk stilling með Mythex

Appin sem smíðuð eru á Mythex nota Vite, React, TypeScript og Tailwind sjálfgefið, svo Tailwind-nálgunin hér að ofan á beint við: límdu alla uppsetningarfyrirmælin inn í spjallið, athugaðu síðan Preview í báðum þemum og í símastærð. Hönnunarfyrirmælaráð Mythex er að nefna bæði hvað eigi að breyta og hvað eigi að halda, sem skiptir hér máli — segðu að ljósa þemað verði að haldast eins. Sjá Hönnun og UI-fyrirmæli, og afturkallaðu með gátstöð (checkpoint) ef umferð fer úrskeiðis.

Fyrir meira um að fá útlitið rétt, sjá hvernig á að hanna gott útlit á appi með gervigreind og hvernig á að skrifa fyrirmæli fyrir gervigreindarsmíðatól.

Spurningar