Kako dodati tamni režim vašem sajtu ili aplikaciji (bez belog bljeska)

Da biste dodali tamni režim, definišite boje kao imenovane tokene (pozadina, tekst, površina, ivica, akcenat) umesto zadatih vrednosti, dajte svakom tokenu svetlu i tamnu vrednost i prebacujte između njih pomoću CSS medijske funkcije prefers-color-scheme, tako da sajt prati sistemsko podešavanje posetioca. Ako želite i ručni prekidač, izbor čuvajte u pregledaču i primenjujte ga malom ugrađenom skriptom u zaglavlju stranice, tako da nema belog bljeska pri učitavanju. Zatim proverite kontrast, slike i grafikone u obe teme. U AI alatu za izradu aplikacija jedan jasan prompt može da uradi većinu posla; kvalitet dolazi iz provere.

Dva pristupa

Većina aplikacija najbolje prolazi sa drugim pristupom: poštujte sistem kao podrazumevano, a neka ljudi to mogu da promene.

Počnite sa tokenima boja

Tamni režim je mučan kada su boje raštrkane po kodu kao white, #333 i gray-100. Lako je kada svaka boja dolazi iz malog skupa imenovanih tokena:

Svaka komponenta koristi nazive tokena. Prebacivanje teme tada znači zamenu jednog skupa vrednosti, a ne izmenu svake komponente.

Savjeti za tamnu paletu:

• Izbegavajte čistu crnu i čistu belu za velike površine; veoma tamna siva i bela sa malo tona lakše se čitaju.
• Pokažite dubinu svetlijim površinama, a ne senkama — senke se jedva vide na tamnoj pozadini.
• Malo smanjite zasićenost jarkih boja brenda; na tamnoj pozadini mogu neprijatno da sijaju.
• Održavajte čitljiv kontrast. WCAG nivo AA traži najmanje 4,5:1 kontrasta za običan tekst. Prigušeni sivi tekst često ne prolazi ovaj test u tamnim temama.

Sa Tailwind CSS-om

Tailwind je podrazumevani alat za stilizovanje u mnogim aplikacijama pravljenim uz AI. Prema Tailwindovoj dokumentaciji o tamnom režimu, varijanta dark: podrazumevano koristi prefers-color-scheme, pa klase poput bg-white dark:bg-gray-900 prate sistemsko podešavanje bez dodatnog rada.

Za ručni prekidač u Tailwindu v4, dokumentacija pokazuje prebacivanje varijante na klasu na roditeljskom elementu:

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

Zatim aplikacija dodaje ili uklanja klasu dark na korenskom elementu. Dokumentacija takođe predlaže ugrađenu skriptu u zaglavlju koja primenjuje sačuvan izbor (ili sistemsko podešavanje) pre nego što se stranica iscrta — upravo tako se izbegava bljesak.

Izbegavanje belog bljeska

Bljesak nastaje zato što se stranica iscrta u svetlom režimu, zatim se učita JavaScript, pročita sačuvan izbor i prebaci na tamno. Rešenje:

1. Postavite malu ugrađenu skriptu u zaglavlje stranice koja čita sačuvanu temu i postavlja klasu na korenskom elementu pre nego što bilo šta bude prikazano.
2. Postavite CSS svojstvo color-scheme za svaku temu, tako da delovi koje crta pregledač (trake za pomeranje, kontrole formulara) budu usklađeni.
3. Dajte stranici eksplicitnu pozadinsku boju u obe teme.
4. Ako je aplikacija renderovana na serveru, proverite da se server i pregledač slažu oko početne teme, ili će stranica da se ponovo iscrta i zatreperi.

Primeri promptova

Potpuno podešavanje:

Dodaj tamni režim. Prvo zameni zadate boje tokenima teme (pozadina, površina, tekst, prigušeni tekst, ivica, akcenat) sa svetlim i tamnim vrednostima. Podrazumevano prati sistemsko podešavanje posetioca. Dodaj prekidač teme u zaglavlju sa opcijama Svetlo, Tamno i Sistem, pamti izbor u localStorage-u i primeni ga ugrađenom skriptom u head-u da ne bude belog bljeska pri učitavanju. Postavi color-scheme za svaku temu. Zadrži trenutni svetli dizajn tačno onakav kakav jeste.

Popravka onoga što je ostalo:

Proveri svaku stranicu u tamnom režimu i popravi: tekst sa slabim kontrastom (cilj je najmanje 4,5:1), zatečene bele pozadine, ivice koje nestaju, grafikone sa tamnim tekstom na tamnoj pozadini i logotipe koji nestaju. Ne menjaj svetlu temu.

Slike i grafikoni:

Koristi svetlu verziju logotipa u tamnom režimu. Neka oseke, linije mreže i oznake grafikona koriste tokene teme. Daj snimcima ekrana suptilnu ivicu u tamnom režimu da se ne stope sa pozadinom.

Korak po korak

1. Revizija boja. Pronađite zadate boje i zamenite ih tokenima. Ovo je većina posla.
2. Definišite tamne vrednosti za svaki token.
3. Pratite sistem pomoću prefers-color-scheme (ili Tailwindovog podrazumevanog dark:).
4. Dodajte prekidač ako ga želite: Svetlo, Tamno, Sistem. Izbor čuvajte u pregledaču; za aplikacije sa prijavom možete ga sačuvati i u korisnikovom profilu.
5. Sprečite bljesak ugrađenom skriptom u head-u i color-scheme.
6. Proverite zahtevne delove: logotipe, ikone, slike sa belim pozadinama, grafikone, blokove koda, mape, ugradnje, emailove.
7. Testirajte obe teme na desktopu i telefonu, sa sistemom podešenim na svetlo i na tamno, i nakon tvrdog osvežavanja.

Česte greške

• Obrtanje svega. Filter koji invertuje boje kvari fotografije i boje brenda.
• Zaboravljene zadate boje. Jedna bela kartica na tamnoj stranici odmah upada u oči.
• Sivi tekst niskog kontrasta. Izgleda stilski, ali ne prolazi čitljivost.
• Beli bljesak pri učitavanju. Posebno primetan na telefonima noću.
• Zaboravljene ugradnje trećih strana. Mape, videi i vidžeti mogu ostati svetli; proverite da li imaju tamnu opciju.
• Prekidač sa samo dva stanja. Kad ga neko klikne, ne može da se vrati na praćenje sistema.
• Kvar svetle teme. U promptu eksplicitno recite da svetli dizajn treba da ostane isti.

Lista za proveru

• Sve boje dolaze iz tokena teme
• Podrazumevano prati sistemsko podešavanje
• Opcioni prekidač sa Svetlo, Tamno i Sistem, zapamćen
• Nema belog bljeska pri učitavanju ili osvežavanju
• color-scheme postavljen da se kontrole formulara i trake poklapaju
• Kontrast teksta najmanje 4,5:1 u obe teme
• Logotipi, slike, grafikoni i ugradnje provereni u tamnom režimu
• Svetla tema nepromenjena
• Testirano na desktopu i telefonu

Tamni režim u Mythexu

Aplikacije napravljene na Mythexu podrazumevano koriste Vite, React, TypeScript i Tailwind, pa se pristup sa Tailwindom iz gornjeg dela direktno primenjuje: nalepite prompt za potpuno podešavanje u chat, pa u Preview-u proverite obe teme i veličinu za telefon. Mythexov savet za dizajn prompte je da imenujete šta menjate i šta zadržavate, što je ovde važno — recite da svetla tema mora ostati kakva jeste. Pogledajte Dizajn i UI prompti, a ako prolaz pođe po zlu, vratite se na checkpoint.

Za više o tome kako dobiti pravi izgled, pogledajte kako dizajnirati dobro izgledajuću aplikaciju uz AI i kako pisati promptove za AI alate za izradu aplikacija.

Pitanja