Cum adaugi modul întunecat pe site-ul sau în aplicația ta (fără fulger alb)

Pentru a adăuga modul întunecat, definește culorile ca tokeni cu nume (fundal, text, suprafață, bordură, accent) în loc de valori scrise direct în cod, dă fiecărui token o valoare pentru modul luminos și una pentru cel întunecat și comută între ele cu funcția media CSS prefers-color-scheme, ca site-ul să urmeze setarea sistemului vizitatorului. Dacă vrei și un comutator manual, stochează alegerea în browser și aplic-o cu un script inline mic în head-ul paginii, ca să nu existe fulger alb la încărcare. Apoi verifică contrastul, imaginile și graficele în ambele teme. Într-un constructor de aplicații AI, un prompt clar poate face cea mai mare parte din treabă; calitatea vine din verificare.

Două abordări

Majoritatea aplicațiilor funcționează cel mai bine cu a doua variantă: respectă sistemul implicit, dar lasă oamenii să-l suprascrie.

Începe cu tokeni de culoare

Modul întunecat este dureros când culorile sunt împrăștiate prin cod, ca white, #333 și gray-100. Devine simplu când fiecare culoare vine dintr-un set mic de tokeni cu nume:

Fiecare componentă folosește numele tokenilor. Schimbarea temei înseamnă atunci să înlocuiești un set de valori, nu să editezi fiecare componentă.

Sfaturi pentru paleta întunecată:

• Evită negrul pur și albul pur pe suprafețe mari; gri foarte închis și alb-murdar sunt mai ușor de citit.
• Arată adâncimea cu suprafețe mai luminoase, nu cu umbre — umbrele abia se văd pe fundaluri întunecate.
• Desaturează ușor culorile de brand strălucitoare; pot străluci incomod pe fundaluri întunecate.
• Păstrează contrastul lizibil. Nivelul AA din WCAG cere cel puțin 4,5:1 contrast pentru textul obișnuit. Textul gri estompat eșuează adesea la asta în temele întunecate.

Cu Tailwind CSS

Tailwind este instrumentul implicit de stilizare în multe aplicații construite cu AI. Conform documentației Tailwind despre modul întunecat, varianta dark: folosește implicit prefers-color-scheme, deci clase precum bg-white dark:bg-gray-900 urmează setarea sistemului fără efort suplimentar.

Pentru un comutator manual în Tailwind v4, documentația arată cum treci varianta pe o clasă de pe un element părinte:

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

Apoi aplicația adaugă sau scoate clasa dark de pe elementul rădăcină. Documentația sugerează și un script inline în head care aplică alegerea salvată (sau setarea sistemului) înainte ca pagina să fie desenată — exact așa eviți fulgerul.

Cum eviți fulgerul alb

Fulgerul apare deoarece pagina se desenează în modul luminos, apoi se încarcă JavaScript, citește alegerea salvată și trece pe modul întunecat. Soluția:

1. Pune un script inline mic în head-ul paginii, care citește tema salvată și setează clasa pe elementul rădăcină înainte ca orice să fie randat.
2. Setează proprietatea CSS color-scheme pentru fiecare temă, ca elementele desenate de browser (bare de derulare, controale de formular) să se potrivească.
3. Dă paginii o culoare de fundal explicită în ambele teme.
4. Dacă aplicația este randată pe server, asigură-te că serverul și browserul sunt de acord asupra temei inițiale, altfel pagina se poate reda din nou și poate clipi.

Exemple de prompturi

O configurare completă:

Adaugă modul întunecat. Mai întâi înlocuiește culorile scrise direct cu tokeni de temă (fundal, suprafață, text, text estompat, bordură, accent), cu valori pentru luminos și întunecat. Implicit, urmează setarea sistemului vizitatorului. Adaugă în header un comutator de temă cu opțiunile Luminos, Întunecat și Sistem, reține alegerea în localStorage și aplic-o cu un script inline în head, ca să nu existe fulger alb la încărcare. Setează color-scheme pentru fiecare temă. Păstrează designul luminos actual exact așa cum este.

Repararea a ceea ce a rămas:

Verifică fiecare pagină în modul întunecat și repară: text cu contrast scăzut (ține-te de cel puțin 4,5:1), fundaluri albe scrise direct, bordurile care dispar, grafice cu text întunecat pe fundal întunecat și logouri care nu se mai văd. Nu schimba tema luminoasă.

Imagini și grafice:

Folosește o versiune luminoasă a logoului în modul întunecat. Fă ca axele graficelor, liniile de grilă și etichetele să folosească tokeni de temă. Dă capturilor de ecran o bordură discretă în modul întunecat, ca să nu se confunde cu fundalul.

Pas cu pas

1. Auditează culorile. Găsește culorile scrise direct și înlocuiește-le cu tokeni. Aceasta este cea mai mare parte a muncii.
2. Definește valorile întunecate pentru fiecare token.
3. Urmează sistemul cu prefers-color-scheme (sau cu dark: implicit din Tailwind).
4. Adaugă un comutator dacă vrei unul: Luminos, Întunecat, Sistem. Stochează alegerea în browser; pentru aplicațiile cu autentificare o poți salva și în profilul utilizatorului.
5. Previne fulgerul cu scriptul inline din head și cu color-scheme.
6. Verifică părțile delicate: logouri, pictograme, imagini cu fundal alb, grafice, blocuri de cod, hărți, încorporări, e-mailuri.
7. Testează ambele teme pe desktop și pe telefon, cu sistemul setat pe luminos și pe întunecat, și după o reîncărcare completă.

Greșeli frecvente

• Inversarea a tot. Un filtru care inversează culorile strică fotografiile și culorile de brand.
• Culori scrise direct lăsate în urmă. Un card alb pe o pagină întunecată se vede imediat.
• Text gri cu contrast scăzut. Arată elegant, dar nu se citește bine.
• Fulger alb la încărcare. Se observă mai ales pe telefoane noaptea.
• Uitarea încorporărilor terțe. Hărțile, videoclipurile și widgeturile pot rămâne luminoase; verifică dacă au o opțiune întunecată.
• Comutator cu doar două stări. Odată ce cineva apasă, nu se mai poate întoarce la urmărirea sistemului.
• Stricarea temei luminoase. Spune explicit în prompt că designul luminos trebuie să rămână la fel.

Listă de verificare

• Toate culorile vin din tokeni de temă
• Urmează implicit setarea sistemului
• Comutator opțional cu Luminos, Întunecat și Sistem, reținut
• Niciun fulger alb la încărcare sau reîncărcare
• color-scheme setat, ca formularele și barele de derulare să se potrivească
• Contrastul textului de cel puțin 4,5:1 în ambele teme
• Logouri, imagini, grafice și încorporări verificate în modul întunecat
• Tema luminoasă neschimbată
• Testat pe desktop și pe telefon

Modul întunecat cu Mythex

Aplicațiile construite pe Mythex folosesc implicit Vite, React, TypeScript și Tailwind, deci abordarea cu Tailwind de mai sus se aplică direct: lipește promptul pentru configurarea completă în chat, apoi verifică Preview în ambele teme și la dimensiunea de telefon. Sfatul Mythex pentru prompturile de design este să spui ce să schimbi și ce să păstrezi, ceea ce contează aici — spune că tema luminoasă trebuie să rămână așa cum este. Vezi prompturi pentru design și UI și, dacă o trecere merge prost, revino cu un checkpoint.

Pentru mai multe despre cum obții aspectul potrivit, vezi cum proiectezi o aplicație arătoasă cu AI și cum scrii prompturi pentru constructorii de aplicații AI.

Întrebări