Cómo añadir modo oscuro a tu web o app (sin el destello blanco)

Para añadir modo oscuro, define tus colores como tokens con nombre (fondo, texto, superficie, borde, acento) en lugar de valores fijos escritos en el código, asigna a cada token un valor claro y otro oscuro, y cambia entre ambos con la característica de medios CSS prefers-color-scheme para que la web siga la configuración del sistema del visitante. Si además quieres un selector manual, guarda la elección en el navegador y aplícala con un pequeño script en línea en el head de la página, para que no haya destello blanco al cargar. Después comprueba el contraste, las imágenes y los gráficos en ambos temas. En un creador de apps con IA, un prompt claro puede hacer casi todo esto; la revisión es donde está la calidad.

Dos enfoques

La mayoría de las apps funcionan mejor con el segundo: respetar el sistema por defecto y permitir que la gente lo cambie.

Empieza con tokens de color

El modo oscuro es un dolor de cabeza cuando los colores están repartidos por el código como white, #333 y gray-100. Es fácil cuando cada color sale de un pequeño conjunto de tokens con nombre:

Cada componente usa los nombres de los tokens. Cambiar de tema consiste entonces en sustituir un solo conjunto de valores, no en editar cada componente.

Consejos para la paleta oscura:

• Evita el negro puro y el blanco puro en áreas grandes; el gris muy oscuro y el blanco roto son más fáciles de leer.
• Muestra la profundidad con superficies más claras, no con sombras: las sombras apenas se ven sobre fondos oscuros.
• Desatura ligeramente los colores de marca brillantes; pueden brillar de forma molesta sobre fondos oscuros.
• Mantén el contraste legible. El nivel AA de WCAG exige al menos 4,5:1 de contraste para el texto normal. El texto gris apagado a menudo no lo cumple en los temas oscuros.

Con Tailwind CSS

Tailwind es la herramienta de estilos por defecto en muchas apps creadas con IA. Según la documentación de modo oscuro de Tailwind, la variante dark: usa prefers-color-scheme por defecto, así que clases como bg-white dark:bg-gray-900 siguen la configuración del sistema sin trabajo extra.

Para un selector manual en Tailwind v4, la documentación muestra cómo cambiar la variante a una clase en un elemento padre:

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

Después, la app añade o quita la clase dark en el elemento raíz. La documentación también sugiere un script en línea en el head que aplica la elección guardada (o la del sistema) antes de que la página se pinte, que es exactamente como se evita el destello.

Evitar el destello blanco

El destello se produce porque la página se pinta en modo claro, luego carga JavaScript, lee la elección guardada y cambia a oscuro. La solución:

1. Pon un pequeño script en línea en el head de la página que lea el tema guardado y establezca la clase en el elemento raíz antes de que se renderice nada.
2. Establece la propiedad CSS color-scheme para cada tema, para que los elementos que dibuja el navegador (barras de desplazamiento, controles de formulario) coincidan.
3. Da a la página un color de fondo explícito en ambos temas.
4. Si la app se renderiza en el servidor, asegúrate de que el servidor y el navegador coinciden en el tema inicial, o la página puede volver a renderizarse y parpadear.

Prompts de ejemplo

Una configuración completa:

Añade modo oscuro. Primero sustituye los colores fijos por tokens de tema (fondo, superficie, texto, texto apagado, borde, acento) con valores claros y oscuros. Por defecto, usa la configuración del sistema del visitante. Añade un selector de tema en la cabecera con las opciones Claro, Oscuro y Sistema, recuerda la elección en localStorage y aplícala con un script en línea en el head para que no haya destello blanco al cargar. Establece color-scheme para cada tema. Mantén el diseño claro actual exactamente como está.

Corregir lo que quede:

Revisa cada página en modo oscuro y corrige: texto con poco contraste (apunta a al menos 4,5:1), fondos blancos fijos, bordes que desaparecen, gráficos con texto oscuro sobre fondos oscuros y logotipos que se pierden. No cambies el tema claro.

Imágenes y gráficos:

Usa una versión clara del logotipo en modo oscuro. Haz que los ejes, las líneas de cuadrícula y las etiquetas de los gráficos usen tokens de tema. Da a las capturas de pantalla un borde sutil en modo oscuro para que no se mezclen con el fondo.

Paso a paso

1. Audita los colores. Busca los colores fijos y sustitúyelos por tokens. Esta es la mayor parte del trabajo.
2. Define los valores oscuros de cada token.
3. Sigue el sistema con prefers-color-scheme (o el dark: por defecto de Tailwind).
4. Añade un selector si lo quieres: Claro, Oscuro, Sistema. Guarda la elección en el navegador; en apps con inicio de sesión también puedes guardarla en el perfil del usuario.
5. Evita el destello con el script del head y color-scheme.
6. Revisa las partes delicadas: logotipos, iconos, imágenes con fondos blancos, gráficos, bloques de código, mapas, incrustados y correos.
7. Prueba ambos temas en escritorio y en móvil, con el sistema en claro y en oscuro, y tras una recarga completa.

Errores habituales

• Invertirlo todo. Un filtro que invierte los colores estropea las fotos y los colores de marca.
• Dejar colores fijos. Una tarjeta blanca en una página oscura destaca enseguida.
• Texto gris con poco contraste. Queda elegante, pero no se lee bien.
• Destello blanco al cargar. Especialmente visible en móviles por la noche.
• Olvidar los incrustados de terceros. Mapas, vídeos y widgets pueden seguir en claro; comprueba si tienen una opción oscura.
• Un selector con solo dos estados. Una vez que alguien lo pulsa, no puede volver a seguir el sistema.
• Romper el tema claro. Di explícitamente en tu prompt que el diseño claro debe mantenerse.

Lista de comprobación

• Todos los colores salen de tokens de tema
• Sigue la configuración del sistema por defecto
• Selector opcional con Claro, Oscuro y Sistema, recordado
• Sin destello blanco al cargar ni al recargar
• color-scheme establecido para que los controles de formulario y las barras de desplazamiento coincidan
• Contraste del texto de al menos 4,5:1 en ambos temas
• Logotipos, imágenes, gráficos e incrustados revisados en modo oscuro
• Tema claro sin cambios
• Probado en escritorio y en móvil

Modo oscuro con Mythex

Las apps creadas en Mythex usan Vite, React, TypeScript y Tailwind por defecto, así que el enfoque de Tailwind de arriba se aplica directamente: pega el prompt de configuración completa en el chat y luego revisa la vista previa en ambos temas y con el tamaño de móvil. El consejo de Mythex para los prompts de diseño es indicar qué cambiar y qué mantener, lo que aquí importa: di que el tema claro debe quedarse como está. Consulta Design & UI prompts, y restaura con un punto de control si una pasada sale mal.

Para más sobre conseguir el aspecto adecuado, consulta cómo diseñar una app bonita con IA y cómo escribir prompts para creadores de apps con IA.

Preguntas