Kako dodati temni način na spletno stran ali aplikacijo (brez belega bliska)

Temni način dodate tako, da barve določite kot poimenovane žetone (ozadje, besedilo, površina, obroba, poudarek) namesto trdo kodiranih vrednosti, vsak žeton dobi svetlo in temno vrednost, med njima pa preklapljate z medijsko lastnostjo CSS prefers-color-scheme, da stran sledi sistemski nastavitvi obiskovalca. Če želite tudi ročni preklopnik, izbiro shranite v brskalnik in jo uporabite z majhnim vgrajenim skriptom v glavi strani, da ob nalaganju ni belega bliska. Nato preverite kontrast, slike in grafikone v obeh temah. V AI graditelju aplikacij lahko večino tega opravi en jasen poziv; kakovost je v preverjanju.

Dva pristopa

Večina aplikacij najbolje deluje z drugim pristopom: privzeto spoštujte sistem, ljudem pa omogočite, da ga prepišejo.

Začnite z barvnimi žetoni

Temni način je boleč, kadar so barve raztresene po kodi kot white, #333 in gray-100. Lahko pa je enostaven, kadar vse barve prihajajo iz majhnega nabora poimenovanih žetonov:

Vsaka komponenta uporablja imena žetonov. Preklapljanje tem tako pomeni zamenjavo ene skupine vrednosti, ne urejanje vsake komponente.

Nasveti za temno paleto:

• Izogibajte se čisti črni in čisti beli na velikih površinah; zelo temno siva in nekoliko čez belo sta lažje za branje.
• Globino prikažite s svetlejšimi površinami, ne s senčami — sence na temnem ozadju komaj vidite.
• Rahlo zmanjšajte nasičenost svetlih barv blagovne znamke; na temnem ozadju lahko neprijetno žarijo.
• Ohranite berljiv kontrast. Raven AA standarda WCAG zahteva vsaj 4,5:1 kontrast za običajno besedilo. Sivo besedilo z manj poudarka pogosto ne izpolnjuje tega v temnih temah.

S Tailwind CSS

Tailwind je privzeto orodje za stiliranje v mnogih aplikacijah, zgrajenih z AI. Po dokumentaciji Tailwinda za temni način varianta dark: privzeto uporablja prefers-color-scheme, zato razredi, kot je bg-white dark:bg-gray-900, sledijo sistemski nastavitvi brez dodatnega dela.

Za ročni preklopnik v Tailwindu v4 dokumentacija prikaže preklop variante na razred na nadrejenem elementu:

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

Nato aplikacija doda ali odstrani razred dark na korenskem elementu. Dokumentacija tudi predlaga vgrajen skript v glavi, ki uporabi shranjeno izbiro (ali sistemsko nastavitev), preden se stran nariše — kar je ravno način, kako se izognete bliskanju.

Izogibanje belemu bliskanju

Blisk nastane, ker se stran nariše v svetlem načinu, nato se naloži JavaScript, prebere shranjena izbira in preklopi na temno. Rešitev:

1. V glavo strani dodajte majhen vgrajen skript, ki prebere shranjeno temo in nastavi razred na korenskem elementu, preden se karkoli prikaže.
2. Za vsako temo nastavite lastnost CSS color-scheme, da se elementi, ki jih nariše brskalnik (drsniki, obrazci), ujemajo.
3. Stran naj ima izrecno barvo ozadja v obeh temah.
4. Če je aplikacija upodobljena na strežniku, poskrbite, da se strežnik in brskalnik strinjata o začetni temi, sicer se stran lahko ponovno nariše in utripa.

Primeri pozivov

Celotna nastavitev:

Dodaj temni način. Najprej nadomesti trdo kodirane barve z žetoni teme (ozadje, površina, besedilo, zabrisano besedilo, obroba, poudarek) z svetlimi in temnimi vrednostmi. Privzeto uporabi sistemsko nastavitev obiskovalca. V glavo dodaj preklopnik teme z možnostmi Svetlo, Temno in Sistem, izbiro shrani v localStorage in jo uporabi z vgrajenim skriptom v glavi, da ob nalaganju ni belega bliska. Nastavi color-scheme za vsako temo. Trenutni svetli dizajn ohrani natanko takšen, kot je.

Popravljanje preostanka:

Preveri vsako stran v temnem načinu in popravi: besedilo z nizkim kontrastom (cilj vsaj 4,5:1), trdo kodirana bela ozadja, obrobe, ki izginejo, grafikone s temnim besedilom na temnem ozadju in logotipe, ki izginejo. Svetle teme ne spreminjaj.

Slike in grafikoni:

Za temni način uporabi svetlo različico logotipa. Osi, mreže in oznake grafikonov naj uporabljajo žetone teme. Posnetkom zaslona v temnem načinu dodaj subtilno obrobo, da se ne stopijo z ozadjem.

Korak za korakom

1. Revizija barv. Poiščite trdo kodirane barve in jih zamenjajte z žetoni. To je večina dela.
2. Določite temne vrednosti za vsak žeton.
3. Sledite sistemu z prefers-color-scheme (ali privzeto varianto dark: v Tailwindu).
4. Dodajte preklopnik, če ga želite: Svetlo, Temno, Sistem. Izbiro shranite v brskalnik; pri aplikacijah s prijavo jo lahko shranite tudi v uporabnikov profil.
5. Preprečite bliskanje z vgrajenim skriptom v glavi in color-scheme.
6. Preverite zahtevne dele: logotipe, ikone, slike z belimi ozadji, grafikone, bloke kode, zemljevide, vdelave, e-pošto.
7. Preizkusite obe temi na namizju in telefonu, z nastavitvijo sistema na svetlo in na temno ter po trdem osvežitvi.

Pogoste napake

• Obračanje vsega. Filter, ki obrne barve, uniči fotografije in barve blagovne znamke.
• Trdo kodirane barve, ki ostanejo. Ena bela kartica na temni strani takoj izstopa.
• Sivo besedilo z nizkim kontrastom. Izgleda elegantno, a ne ustreza za branje.
• Beli blisk ob nalaganju. Še posebej opazen na telefonih ponoči.
• Pozaba na vdelave tretjih oseb. Zemljevidi, videoposnetki in vtičniki lahko ostanejo svetli; preverite, ali imajo temno možnost.
• Preklopnik z le dvema stanjema. Ko ga nekdo klikne, se ne more več vrniti k sledenju sistemu.
• Kvarjenje svetle teme. V pozivu izrecno povejte, da mora svetli dizajn ostati enak.

Kontrolni seznam

• Vse barve prihajajo iz žetonov teme
• Privzeto sledi sistemski nastavitvi
• Izbirni preklopnik Svetlo, Temno in Sistem, si zapomni izbiro
• Ni belega bliska ob nalaganju ali osvežitvi
• color-scheme nastavljen, da se obrazci in drsniki ujemajo
• Kontrast besedila vsaj 4,5:1 v obeh temah
• Logotipi, slike, grafikoni in vdelave preverjeni v temnem načinu
• Svetla tema nespremenjena
• Preizkušeno na namizju in telefonu

Temni način z Mythexom

Aplikacije, zgrajene na Mythexu, privzeto uporabljajo Vite, React, TypeScript in Tailwind, zato zgornji pristop s Tailwindom velja neposredno: prilepite poln poziv za nastavitev v klepet, nato v Predogledu preverite obe temi in velikost za telefon. Mythexov nasvet za oblikovalske pozive je, naj poimenujete, kaj spremeniti in kaj ohraniti, kar tu šteje — povejte, da mora svetla tema ostati takšna, kot je. Glejte Pozivi za oblikovanje in uporabniški vmesnik in, če gre prehod narobe, se vrnite na kontrolno točko.

Za več o tem, kako dobiti pravi videz, glejte kako z AI oblikovati lepo aplikacijo in kako pisati pozive za AI graditelje aplikacij.

Vprašanja