Com afegir el mode fosc al teu lloc web o app (sense el flaix blanc)

Per afegir el mode fosc, defineix els colors com a testimonis amb nom (fons, text, superfície, vora, accent) en lloc de valors fixos al codi, dona a cada testimoni un valor clar i un de fosc, i alterna entre ells amb la funcionalitat CSS prefers-color-scheme perquè el lloc segueixi la configuració del sistema del visitant. Si també vols un interruptor manual, desa l'elecció al navegador i aplica-la amb un script petit en línia al head de la pàgina perquè no hi hagi flaix blanc en carregar. Després comprova el contrast, les imatges i els gràfics en tots dos temes. En un constructor d'apps amb IA, un sol prompt clar pot fer la major part del treball; la comprovació és on es decideix la qualitat.

Dos enfocaments

La majoria d'apps van millor amb el segon: respectar el sistema per defecte, i deixar que la gent ho canviï.

Comença amb testimonis de color

El mode fosc és feixuc quan els colors estan repartits pel codi com white, #333 i gray-100. És fàcil quan cada color surt d'un petit conjunt de testimonis amb nom:

Cada component usa els noms dels testimonis. Canviar de tema vol dir, aleshores, substituir un sol conjunt de valors, no editar cada component.

Consells per a la paleta fosca:

• Evita el negre pur i el blanc pur en àrees grans; el gris molt fosc i el blanc trencat són més fàcils de llegir.
• Mostra la profunditat amb superfícies més clares, no amb ombres; les ombres gairebé no es veuen sobre fons foscos.
• Desatura una mica els colors de marca brillants; poden brillar de manera incòmoda sobre fons foscos.
• Mantén un contrast llegible. El nivell AA de WCAG demana almenys un contrast de 4,5:1 per al text normal. El text gris atenuat sovint no ho compleix en temes foscos.

Amb Tailwind CSS

Tailwind és l'eina d'estil per defecte en moltes apps creades amb IA. Segons la documentació de mode fosc de Tailwind, la variant dark: usa prefers-color-scheme per defecte, així que classes com bg-white dark:bg-gray-900 segueixen la configuració del sistema sense cap treball addicional.

Per a un interruptor manual a Tailwind v4, la documentació mostra com canviar la variant per una classe en un element pare:

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

Despràs, l'app afegeix o treu la classe dark a l'element arrel. La documentació també suggereix un script en línia al head que aplica l'elecció desada (o la configuració del sistema) abans que la pàgina es pinti; és exactament com s'evita el flaix.

Evitar el flaix blanc

El flaix passa perquè la pàgina es pinta en mode clar, després carrega JavaScript, llegeix l'elecció desada i canvia a fosc. La solució:

1. Posa un script petit en línia al head que llegeixi el tema desat i estableixi la classe a l'element arrel abans que es renderitzi res.
2. Estableix la propietat CSS color-scheme per a cada tema perquè les parts que dibuixa el navegador (barres de desplaçament, controls de formulari) coincideixin.
3. Dona a la pàgina un color de fons explícit en tots dos temes.
4. Si l'app es renderitza al servidor, assegura't que el servidor i el navegador estan d'acord en el tema inicial, o la pàgina pot tornar a renderitzar-se i parpellejar.

Prompts d'exemple

Una configuració completa:

Afegeix el mode fosc. Primer substitueix els colors fixos per testimonis de tema (fons, superfície, text, text atenuat, vora, accent) amb valors clars i foscos. Per defecte, segueix la configuració del sistema del visitant. Afegeix un selector de tema a la capçalera amb les opcions Clar, Fosc i Sistema, recorda l'elecció a localStorage i aplica-la amb un script en línia al head perquè no hi hagi flaix blanc en carregar. Estableix color-scheme per a cada tema. Mantén el disseny clar actual exactament igual.

Corregir el que queda:

Revisa cada pàgina en mode fosc i corregeix: text amb poc contrast (busca almenys 4,5:1), fons blancs fixos, vores que desapareixen, gràfics amb text fosc sobre fons foscos, i logotips que no es veuen. No canviïs el tema clar.

Imatges i gràfics:

Usa una versió clara del logotip en mode fosc. Fes que els eixos, les línies de quadrícula i les etiquetes dels gràfics usin testimonis del tema. Dona a les captures de pantalla una vora subtil en mode fosc perquè no es confonguin amb el fons.

Pas a pas

1. Audita els colors. Troba els colors fixos i substitueix-los per testimonis. Això és la major part de la feina.
2. Defineix els valors foscos per a cada testimoni.
3. Segueix el sistema amb prefers-color-scheme (o amb el dark: per defecte de Tailwind).
4. Afegeix un interruptor si en vols un: Clar, Fosc, Sistema. Desa l'elecció al navegador; per a apps amb inici de sessió també pots guardar-la al perfil de l'usuari.
5. Evita el flaix amb el script del head i color-scheme.
6. Revisa les parts delicades: logotips, icones, imatges amb fons blanc, gràfics, blocs de codi, mapes, incrustacions, correus electrònics.
7. Prova els dos temes a l'escriptori i al telèfon, amb el sistema en clar i en fosc, i després d'un refresc complet.

Errors habituals

• Invertir-ho tot. Un filtre que inverteix els colors arruïna les fotos i els colors de marca.
• Deixar colors fixos. Una targeta blanca en una pàgina fosca es nota immediatament.
• Text gris amb poc contrast. Té un aspecte elegant però no és llegible.
• Flaix blanc en carregar. Especialment notable en mòbils de nit.
• Oblidar les incrustacions de tercers. Els mapes, els vídeos i els widgets poden quedar en clar; comprova si tenen una opció fosca.
• Un interruptor amb només dos estats. Un cop algú el prem, no pot tornar a seguir el sistema.
• Trencar el tema clar. Digues explícitament al prompt que el disseny clar s'ha de mantenir igual.

Llista de comprovació

• Tots els colors vénen de testimonis del tema
• Segueix la configuració del sistema per defecte
• Interruptor opcional amb Clar, Fosc i Sistema, recordat
• Cap flaix blanc en carregar o refrescar
• color-scheme establert perquè els controls de formulari i les barres de desplaçament coincideixin
• Contrast del text d'almenys 4,5:1 en tots dos temes
• Logotips, imatges, gràfics i incrustacions revisats en mode fosc
• Tema clar sense canvis
• Provat a l'escriptori i al telèfon

Mode fosc amb Mythex

Les apps creades amb Mythex usen Vite, React, TypeScript i Tailwind per defecte, així que l'enfocament de Tailwind d'aquí dalt s'aplica directament: enganxa el prompt de configuració completa al xat i després revisa la Vista prèvia en tots dos temes i a la mida del telèfon. El consell de Mythex sobre prompts de disseny és dir què canviar i què mantenir, cosa que aquí importa: digues que el tema clar s'ha de mantenir tal com està. Consulta Prompts de disseny i d'interfície, i desfés amb un punt de control si una passada surt malament.

Per a més informació sobre com aconseguir l'aspecte correcte, consulta com dissenyar una app ben aparent amb IA i com escriure prompts per a constructors d'apps amb IA.

Preguntes