Kako dodati tamni režim na web stranicu ili aplikaciju (bez bljeskanja)

Da biste dodali tamni režim, definišite boje kao imenovane tokene (pozadina, tekst, površina, ivica, akcent) umjesto tvrdo upisanih vrijednosti, dajte svakom tokenu svijetlu i tamnu vrijednost i prebacujte se između njih pomoću CSS svojstva prefers-color-scheme, tako da sajt prati sistemsku postavku posjetioca. Ako želite i ručni prekidač, sačuvajte izbor u pregledniku i primijenite ga malom inline skriptom u head dijelu stranice da ne bi bilo bijelog bljeska pri učitavanju. Zatim provjerite kontrast, slike i grafikone u obje teme. U AI alatu za izradu aplikacija, jedan jasan prompt može uraditi većinu ovoga; provjera je mjesto gdje dolazi kvalitet.

Dva pristupa

Većina aplikacija najbolje prolazi s drugim: poštuje sistem kao podrazumijevano, a ljudima dopušta da to nadjačaju.

Počnite s tokenima boja

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

Svaka komponenta koristi nazive tokena. Prebacivanje teme tada znači zamjenu jednog skupa vrijednosti, a ne mijenjanje svake komponente.

Savjeti za tamnu paletu:

• Izbjegavajte čisto crnu i čisto bijelu za velike površine; vrlo tamna siva i bjelkasta lakše se čitaju.
• Pokažite dubinu svjetlijim površinama, a ne sjenama; sjene se na tamnim pozadinama jedva vide.
• Malo desaturirajte svijetle brend boje; mogu neugodno svijetliti na tamnim pozadinama.
• 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 ovo u tamnim temama.

S Tailwind CSS-om

Tailwind je podrazumijevani alat za stilizovanje u mnogim aplikacijama pravljenim AI-jem. Prema Tailwindovoj dokumentaciji za tamni režim, varijanta dark: koristi prefers-color-scheme podrazumijevano, pa klase kao bg-white dark:bg-gray-900 prate sistemsku postavku 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 korijenskom elementu. Dokumentacija takođe predlaže inline skriptu u head dijelu koja primjenjuje sačuvani izbor (ili sistemsku postavku) prije nego se stranica iscrta, što je tačno način da se izbjegne bljesak.

Izbjegavanje bijelog bljeska

Bljesak se javlja zato što se stranica iscrta u svijetlom režimu, zatim se učita JavaScript, pročita sačuvani izbor i prebaci na tamno. Rješenje:

1. Stavite malu inline skriptu u head dio stranice koja čita sačuvanu temu i postavlja klasu na korijenskom elementu prije nego išta bude iscrtano.
2. Postavite CSS svojstvo color-scheme za svaku temu da se dijelovi koje crta preglednik (skrolovi, kontrole formi) poklope.
3. Dajte stranici eksplicitnu pozadinsku boju u obje teme.
4. Ako je aplikacija renderovana na serveru, pobrinite se da se server i preglednik slažu oko početne teme, inače stranica može ponovo da se renderuje i treperi.

Primjeri promptova

Potpuno podešavanje:

Dodaj tamni režim. Prvo zamijeni tvrdo upisane boje tokenima teme (pozadina, površina, tekst, prigušeni tekst, ivica, akcent) sa svijetlim i tamnim vrijednostima. Podrazumijevano prati sistemsku postavku posjetioca. Dodaj prekidač teme u zaglavlju s opcijama Svijetlo, Tamno i Sistem, pamti izbor u localStorage-u i primijeni ga inline skriptom u head dijelu da ne bude bijelog bljeska pri učitavanju. Postavi color-scheme za svaku temu. Zadrži trenutni svijetli dizajn tačno kakav jeste.

Popravka onoga što preostane:

Provjeri svaku stranicu u tamnom režimu i popravi: tekst s niskim kontrastom (cilj najmanje 4,5:1), tvrdo upisane bijele pozadine, ivice koje nestaju, grafikone s tamnim tekstom na tamnim pozadinama i logotipe koji nestaju. Ne mijenjaj svijetlu temu.

Slike i grafikoni:

U tamnom režimu koristi svijetlu verziju logotipa. Neka oznake osa, linije mreže i natpisi grafikona koriste tokene teme. Daj snimcima ekrana suptilnu ivicu u tamnom režimu da se ne stapaju s pozadinom.

Korak po korak

1. Provjerite boje. Nađite tvrdo upisane boje i zamijenite ih tokenima. Ovo je većina posla.
2. Definišite tamne vrijednosti za svaki token.
3. Pratite sistem pomoću prefers-color-scheme (ili podrazumijevanog dark: iz Tailwinda).
4. Dodajte prekidač ako ga želite: Svijetlo, Tamno, Sistem. Izbor čuvajte u pregledniku; za aplikacije s prijavom možete ga sačuvati i u profilu korisnika.
5. Spriječite bljesak inline skriptom u head dijelu i color-scheme.
6. Provjerite zahtjevnije dijelove: logotipe, ikone, slike s bijelim pozadinama, grafikone, blokove koda, mape, ugrađene sadržaje, emailove.
7. Testirajte obje teme na desktopu i telefonu, sa sistemom postavljenim na svijetlo i na tamno, te nakon tvrdog osvježavanja.

Česte greške

• Invertovanje svega. Filter koji invertuje boje kvari fotografije i brend boje.
• Ostavljene tvrdo upisane boje. Jedna bijela kartica na tamnoj stranici odmah upada u oči.
• Sivi tekst s niskim kontrastom. Izgleda stilizovano, a ne prolazi čitljivost.
• Bijeli bljesak pri učitavanju. Naročito se primjećuje na telefonima noću.
• Zaboravljeni ugrađeni sadržaji. Mape, videi i widgeti mogu ostati svijetli; provjerite da li imaju tamnu opciju.
• Prekidač s dva stanja. Kada ga neko klikne, ne može se vratiti na praćenje sistema.
• Kvarenje svijetle teme. U promptu jasno recite da svijetli dizajn treba da ostane isti.

Kontrolna lista

• Sve boje dolaze iz tokena teme
• Podrazumijevano prati sistemsku postavku
• Opcionalni prekidač Svijetlo, Tamno i Sistem, sačuvan
• Nema bljeska pri učitavanju ili osvježavanju
• color-scheme postavljen da se kontrole formi i skrolovi poklope
• Kontrast teksta najmanje 4,5:1 u obje teme
• Logotipi, slike, grafikoni i ugrađeni sadržaji provjereni u tamnom režimu
• Svijetla tema nepromijenjena
• Testirano na desktopu i telefonu

Tamni režim s Mythexom

Aplikacije napravljene na Mythexu podrazumijevano koriste Vite, React, TypeScript i Tailwind, pa pristup s Tailwindom iz gornjeg teksta direktno važi: zalijepite prompt za potpuno podešavanje u chat, zatim provjerite pregled u obje teme i na veličini telefona. Mythexov savjet za prompte o dizajnu je da navedete šta mijenjate i šta zadržavate, što ovdje ima važnost; recite da svijetla tema mora ostati kakva jeste. Pogledajte Design & UI prompts, 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 prompte za AI alate za izradu aplikacija.

Pitanja