Kako dodati tamni način rada na web-stranicu ili aplikaciju (bez bljeska)

Da biste dodali tamni način rada, definirajte boje kao imenovane tokene (pozadina, tekst, površina, rub, naglasak) umjesto tvrdo kodiranih vrijednosti, dajte svakom tokenu svijetlu i tamnu vrijednost te prebacujte među njima pomoću CSS medijske značajke prefers-color-scheme tako da stranica slijedi postavku sustava posjetitelja. Ako želite i ručni prekidač, spremite izbor u preglednik i primijenite ga malom inline skriptom u zaglavlju stranice da nema bijelog bljeska pri učitavanju. Zatim provjerite kontrast, slike i grafikone u obje teme. U AI graditelju aplikacija jedan jasan prompt može obaviti većinu toga; provjera je ono što donosi kvalitetu.

Dva pristupa

Većina aplikacija najbolje prolazi s drugim pristupom: prema zadanom poštujte sustav, a ljudima dopustite da to nadjačaju.

Početak s tokenima boja

Tamni način je mučan kada su boje raspršene kroz kod kao white, #333 i gray-100. Lak je kada svaka boja dolazi iz malog skupa imenovanih tokena:

Svaka komponenta koristi imena tokena. Promjena teme tada znači zamjenu jednog skupa vrijednosti, a ne uređivanje svake komponente.

Savjeti za tamnu paletu:

• Izbjegavajte čistu crnu i čistu bijelu za velike površine; vrlo tamno siva i izlomljena bijela lakše se čitaju.
• Prikaž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 razina AA traži najmanje 4,5:1 kontrast za normalan tekst. Prigušeni sivi tekst često ne prolazi to na tamnim temama.

S Tailwind CSS-om

Tailwind je zadani alat za stilizaciju u mnogim aplikacijama izrađenim AI alatima. Prema Tailwindovoj dokumentaciji za tamni način, varijanta dark: prema zadanom koristi prefers-color-scheme, pa klase poput bg-white dark:bg-gray-900 prate postavku sustava bez dodatnog posla.

Za ručni prekidač u Tailwindu v4 dokumentacija prikazuje 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đer predlaže inline skriptu u zaglavlju koja primjenjuje spremljeni izbor (ili postavku sustava) prije nego se stranica iscrta, što je upravo način da se izbjegne bljesak.

Izbjegavanje bijelog bljeska

Bljesak se događa jer se stranica iscrta u svijetlom načinu, zatim se učita JavaScript, pročita spremljeni izbor i prebaci na tamno. Rješenje:

1. Stavite malu inline skriptu u zaglavlje stranice koja čita spremljenu temu i postavlja klasu na korijenski element prije nego išta bude iscrtano.
2. Postavite CSS svojstvo color-scheme za svaku temu tako da se elementi koje crta preglednik (klizači, kontrole obrazaca) podudaraju.
3. Dajte stranici eksplicitnu pozadinsku boju u obje teme.
4. Ako je aplikacija renderirana na poslužitelju, osigurajte da se poslužitelj i preglednik slažu oko početne teme, inače stranica može ponovno iscrtavati i treperiti.

Primjeri promptova

Potpuna postavka:

Dodaj tamni način rada. Najprije zamijeni tvrdo kodirane boje tokenima teme (pozadina, površina, tekst, prigušeni tekst, rub, naglasak) sa svijetlim i tamnim vrijednostima. Zadano neka prati postavku sustava posjetitelja. Dodaj prekidač teme u zaglavlju s opcijama Svijetlo, Tamno i Sustav, pamti izbor u localStorageu i primijeni ga inline skriptom u zaglavlju da nema bijelog bljeska pri učitavanju. Postavi color-scheme za svaku temu. Zadrži trenutni svijetli dizajn točno onakvim kakav jest.

Popravljanje ostatka:

Provjeri svaku stranicu u tamnom načinu i popravi: tekst s niskim kontrastom (cilj najmanje 4,5:1), tvrdo kodirane bijele pozadine, rubove koji nestaju, grafikone s tamnim tekstom na tamnim pozadinama i logotipe koji nestaju. Ne mijenjaj svijetlu temu.

Slike i grafikoni:

U tamnom načinu koristi svijetlu verziju logotipa. Neka osi grafikona, mreže i oznake koriste tokene teme. Dodaj suptilan rub snimkama zaslona u tamnom načinu da se ne stapaju s pozadinom.

Korak po korak

1. Revidirajte boje. Pronađite tvrdo kodirane boje i zamijenite ih tokenima. To je većina posla.
2. Definirajte tamne vrijednosti za svaki token.
3. Slijedite sustav pomoću prefers-color-scheme (ili Tailwindovog zadanog dark:).
4. Dodajte prekidač ako ga želite: Svijetlo, Tamno, Sustav. Izbor spremite u preglednik; za aplikacije s prijavom možete ga spremiti i u korisnički profil.
5. Spriječite bljesak inline skriptom u zaglavlju i color-scheme.
6. Provjerite zahtjevne dijelove: logotipe, ikone, slike s bijelim pozadinama, grafikone, blokove koda, karte, ugradnje i e-poruke.
7. Testirajte obje teme na računalu i telefonu, s postavkom sustava postavljenom na svijetlo i na tamno, te nakon tvrdog osvježavanja.

Česte greške

• Invertiranje svega. Filter koji invertira boje kvari fotografije i brend boje.
• Ostavljene tvrdo kodirane boje. Jedna bijela kartica na tamnoj stranici odmah upada u oči.
• Sivi tekst s niskim kontrastom. Izgleda stilski, ali ne prolazi čitljivost.
• Bijeli bljesak pri učitavanju. Osobito je uočljiv na telefonima noću.
• Zaboravljene ugradnje trećih strana. Karte, videozapisi i widgeti mogu ostati svijetli; provjerite imaju li tamnu opciju.
• Prekidač s samo dva stanja. Kada ga netko klikne, više se ne može vratiti na slijeđenje sustava.
• Kvarenje svijetle teme. U promptu izričito recite da svijetli dizajn treba ostati isti.

Kontrolni popis

• Sve boje dolaze iz tokena teme
• Prema zadanom slijedi postavku sustava
• Izborni prekidač sa Svijetlo, Tamno i Sustav, zapamćen
• Nema bijelog bljeska pri učitavanju ili osvježavanju
• color-scheme postavljen da se kontrole obrazaca i klizači podudaraju
• Kontrast teksta najmanje 4,5:1 u obje teme
• Logotipi, slike, grafikoni i ugradnje provjereni u tamnom načinu
• Svijetla tema nepromijenjena
• Testirano na računalu i telefonu

Tamni način s Mythexom

Aplikacije izgrađene na Mythexu prema zadanom koriste Vite, React, TypeScript i Tailwind, pa se gore opisani Tailwind pristup izravno primjenjuje: zalijepite prompt za potpunu postavku u chat, zatim provjerite Preview u obje teme i na veličini telefona. Mythexov savjet za dizajn prompte jest navesti što mijenjati i što zadržati, što ovdje važi: recite da svijetla tema mora ostati kakva jest. Pogledajte Dizajn i UI prompti i vratite se na checkpoint ako neki prolaz pođe po zlu.

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

Pitanja