Diseño de modo oscuro: cómo lanzar un segundo tema sin romper el primero
Guía de diseñador en activo sobre el modo oscuro. La matemática del color que funciona de verdad, las trampas de los componentes y cómo lanzar un tema oscuro que se vea diseñado y no invertido.
La mayoría de los modos oscuros no están diseñados, están invertidos. Un diseñador cambia el fondo a casi negro, tiñe el texto de casi blanco y da el trabajo por terminado. El resultado es un tema que se ve áspero, se lee peor que la versión clara y hace que la marca parezca otro producto bajo la luz equivocada.
Este paper es la versión de trabajo. La matemática del color que hace que un tema oscuro se sienta intencional, las trampas de componentes que se rompen en la oscuridad y la estructura de tokens que mantiene ambos temas sincronizados a medida que el producto crece. Nada de degradados de Dribbble, solo un tema oscuro que se gana su sitio en el sistema de diseño.
Qué es realmente el modo oscuro
El modo oscuro es un segundo tema completo, no una inversión de color. Tiene su propia lógica de superficies, sus propias reglas de contraste y sus propios ajustes de peso tipográfico. Un modo oscuro real se diseña desde cero sobre el mismo conjunto de componentes y luego se reconcilia con el tema claro mediante tokens compartidos.
El atajo de la inversión falla por una razón concreta. El modo claro depende de superficies blancas que reflejan la profundidad hacia arriba. El modo oscuro no puede invertir eso, porque las superficies negro puro absorben la profundidad en lugar de crearla. Todo el sistema de elevación tiene que reconstruirse. El desglose de la guía de sistemas de diseño explica por qué esto debe ocurrir dentro de los tokens, no dentro de cada componente.
Por qué importa el modo oscuro en 2026
Tres razones. Ninguna es estética.
Duración de batería en pantallas OLED. Cada píxel negro en un panel OLED consume cero energía. Una interfaz oscura en un teléfono puede reducir el consumo de la pantalla entre un 30 y un 60 por ciento con brillo alto. Para quien usa el móvil, un tema oscuro es una función de batería antes que una visual.
Accesibilidad para la sensibilidad a la luz. Las personas con migrañas, astigmatismo o fotofobia no pueden usar cómodamente una interfaz clara durante periodos largos. Lanzar modo oscuro es un compromiso de accesibilidad, no una preferencia. La lista de verificación de accesibilidad web cubre dónde encaja el theming dentro de una auditoría completa.
Expectativa del usuario. Los sistemas operativos incluyen un interruptor de modo oscuro que se aplica a todo el sistema. Un producto que ignora el ajuste del sistema se siente viejo. Los usuarios filtran las tiendas de apps y los directorios de extensiones por soporte de modo oscuro. No tener tema oscuro es un problema de marketing, no solo un hueco de UI.
La primera regla: nunca uses negro puro
El negro puro (#000000) es el error más común en un modo oscuro nuevo. Parece correcto porque parece la superficie más oscura posible. Se lee mal porque el ojo humano no puede juzgar la profundidad contra un negro perfecto.
La solución: usa un gris oscuro con un sutil matiz de marca como superficie base. Algo en el rango de #0B0B10 a #121218 para la mayoría de los productos, a veces hasta #1A1A1F. El valor exacto depende de la temperatura de color de la marca. Una marca cálida va hacia un oscuro ligeramente cálido. Una marca fría, hacia un oscuro ligeramente frío. El neutro puro se lee sin vida.
La misma regla aplica al texto de mayor contraste. El blanco puro (#FFFFFF) sobre una superficie oscura crea halación, un efecto de borde luminoso borroso que hace fatigoso leer texto pequeño. Baja el texto a unos #E8E8EA o aplica un blanco con 85 a 92 por ciento de opacidad. La bajada es invisible al ojo pero enorme para la legibilidad.
Elevación de superficies en modo oscuro
El modo claro usa sombras para mostrar que una tarjeta está sobre el fondo. El modo oscuro no puede, porque las superficies oscuras se tragan las sombras. La solución es la elevación mediante luminosidad.
Cada escalón de elevación aclara la superficie, no la oscurece. Una tarjeta sobre la superficie base es ligeramente más clara que la base. Un modal sobre una tarjeta es aún más claro. La profundidad en una interfaz oscura se lee como un gradiente de superficies que suben hacia el usuario, no como sombras que caen debajo.
Material Design formalizó esto con una escala de elevación de cinco pasos, y la idea general vale para cualquier sistema de diseño. Una escala que funciona para la mayoría de los productos:
| Elevación | Ejemplo | Valor de superficie |
|---|---|---|
| 0 | Fondo base | #0E0E12 |
| 1 | Tarjeta, campo de entrada | #17171C |
| 2 | Tarjeta elevada, menú | #1F1F25 |
| 3 | Modal, diálogo | #28282F |
| 4 | Popover, tooltip | #31313A |
Los números concretos varían según la marca, pero la lógica no. Toda superficie elevada es más clara que la de debajo, toda sombra es sutil y la jerarquía se lee como superficies apiladas en el espacio y no como cajas dibujadas en una página.
Matemática del contraste para temas oscuros
El glosario de ratio de contraste cubre la base de WCAG de 4,5 a 1 para texto normal y 3 a 1 para texto grande. El modo oscuro no relaja esas reglas, pero cambia cómo se cumplen.
En modo claro, el texto de cuerpo en torno a #222 sobre fondo blanco alcanza aproximadamente 16 a 1. Los diseñadores están acostumbrados a tener un margen enorme sobre el mínimo. El modo oscuro es más ajustado. El texto de cuerpo en #E0E0E0 sobre #0E0E12 alcanza unos 13 a 1, que sigue siendo sólido, pero el margen de error es menor. Bajar el texto a #B0B0B0 para suavizar el aspecto puede dejar en silencio una sección por debajo de 4,5 a 1.
La disciplina: toda decisión de color del modo oscuro pasa por un verificador de contraste. No una vez por tema, una vez por cada par de tokens. Texto sobre superficie base, texto sobre tarjeta, texto sobre modal, texto de placeholder, texto deshabilitado, texto de enlace. Cada par es una comprobación aparte.
Una trampa común es el token de texto atenuado. En modo claro, el texto atenuado en #666 sobre blanco se lee claramente a 5,7 a 1. Invertido a #999 sobre #0E0E12, la relación cae a cerca de 4,2 a 1, que no cumple WCAG AA. El atajo de la inversión rompe el cumplimiento de accesibilidad en silencio, y la mayoría de los equipos no lo nota hasta que una auditoría lo encuentra.
Color en modo oscuro: saturación, no solo valor
Los colores de marca que brillan sobre fondo blanco a menudo se sienten turbios o eléctricos sobre uno oscuro. La razón es que las superficies oscuras amplifican la saturación percibida. Un acento saturado al 100 por ciento sobre una superficie clara se lee seguro. El mismo acento sobre una superficie oscura se lee radiactivo.
La regla es desaturar los colores de acento para el tema oscuro, normalmente entre un 10 y un 20 por ciento, y aclararlos un poco. Un botón primario que es #3455FF sobre blanco puede pasar a #5C78FF sobre oscuro. Misma familia de tono, ajustada al nuevo entorno de contraste. La marca sigue leyéndose como la marca. Simplemente deja de molestar.
El glosario de paleta de color cubre la estructura base dentro de la que vive este ajuste. Un buen modo oscuro no inventa colores nuevos, lanza un conjunto paralelo de los mismos colores de marca afinados para el nuevo contexto de superficie.
Trampas de componentes que se rompen en la oscuridad
La mayoría de los componentes necesitan al menos un ajuste para el modo oscuro. Algunos se rompen por completo sin él. Estos son los culpables habituales.
Los bordes se convierten en el separador principal
En modo claro, una sombra sutil o un borde apenas visible separa los componentes. En modo oscuro, las sombras desaparecen y la mayoría de los bordes se esfuman. El borde pasa a ser la herramienta principal para definir los límites del componente, y a menudo hay que subirlo de algo como #EEE en claro a algo como #2A2A30 en oscuro para que siga siendo visible.
La prueba es ver la UI al 80 por ciento de brillo en un portátil. Si los bordes de los componentes empiezan a desaparecer, el token de borde necesita un valor más brillante en el tema oscuro.
Las sombras invierten su propósito
Las sombras en modo claro empujan las superficies hacia abajo y hacia atrás. Las sombras en modo oscuro tienen que sugerir superficies que suben y avanzan. Esto suele lograrse combinando una superficie ligeramente más clara (elevación) con una sombra oscura casi invisible debajo que añade peso sin hacerse notar.
Un par de sombras que funciona en modo oscuro:
- Exterior:
0 4px 12px rgba(0, 0, 0, 0.5)para anclar el elemento - Brillo superior interior:
inset 0 1px 0 rgba(255, 255, 255, 0.05)para sugerir un borde elevado
Usados juntos, el componente se lee como elevado en lugar de recortado. Usados por separado, ninguno de los dos efectos se lee.
Los estados deshabilitados desaparecen
Un botón deshabilitado en modo claro suele ser un gris desaturado sobre blanco. El mismo tratamiento en modo oscuro funde el botón con la superficie por completo. La solución es aumentar la opacidad del estado deshabilitado, no reducirla. Algo como un 40 por ciento de opacidad sobre el color de la superficie elevada, en lugar de caer a un gris deslavado. El estado deshabilitado debe seguir leyéndose como un botón, solo que inactivo.
Las imágenes y las ilustraciones necesitan su propio tratamiento
Una foto de producto tomada sobre fondo blanco se ve rota sobre una superficie oscura. Una ilustración de marca dibujada con trazo blanco desaparece por completo. Las imágenes necesitan su propia pasada de modo oscuro, ya sea con un recurso aparte, un cambio de fondo o un filtro cuidadosamente afinado. Es la parte más cara de lanzar bien en modo oscuro, y es la que la mayoría de los equipos recorta.
La solución pragmática para equipos que no pueden lanzar recursos de imagen paralelos: añadir un fondo suave a cada contenedor de imagen en modo oscuro, algo alrededor de #F5F5F7 con esquinas redondeadas. Las imágenes que se tomaron sobre blanco ahora descansan sobre un contenedor claro, y el resto de la UI sigue oscura.
Los estados de foco en inputs necesitan más contraste
Un anillo de foco azul que funciona sobre fondo blanco pierde impacto contra superficies oscuras. El glosario de estado de foco cubre el indicador focus-visible que exige WCAG. En modo oscuro, el anillo de foco a menudo necesita ser entre un 10 y un 20 por ciento más brillante o grueso que su gemelo del modo claro. El requisito de accesibilidad no cambia, pero el tratamiento visual tiene que ajustarse para seguir cumpliéndolo.
Estructura de tokens para temas duales
Un modo oscuro que vive en overrides de CSS es un modo oscuro que va a derivar. Cada componente nuevo gestionará el theming de forma distinta, y en seis meses el producto tendrá tres patrones de theming discutiendo entre sí.
La estructura correcta son los tokens semánticos. El glosario de token de diseño cubre el concepto base. El modo oscuro es el caso de uso que demuestra que los tokens no son opcionales.
Tres capas de tokens:
Capa uno: primitivos. Valores de color en bruto. color.neutral.900, color.brand.500. Sin opinión, sin contexto.
Capa dos: semántica. Nombres basados en roles. color.surface.base, color.surface.raised, color.text.primary, color.text.muted, color.border.default. Cada token semántico apunta a un primitivo.
Capa tres: tema. Dos mapas completos, uno por tema, que deciden a qué primitivo se resuelve cada token semántico. El tema claro asigna color.surface.base a color.neutral.50. El tema oscuro asigna color.surface.base a color.neutral.900.
Los componentes solo consumen tokens semánticos. Nunca referencian un primitivo directamente y nunca fijan un tema a mano. El selector de tema cambia el mapa, los componentes se redibujan y nada se rompe. Es el único patrón que escala más allá de un equipo de dos diseñadores.
Respetar las preferencias del sistema
El navegador expone prefers-color-scheme mediante media queries de CSS. El producto tiene que respetarlo. La experiencia por defecto para un usuario con modo oscuro activado a nivel de sistema operativo es el tema oscuro, punto. Un interruptor dentro de la app es un refinamiento, no un reemplazo.
Tres reglas para una implementación correcta:
Usa por defecto la preferencia del sistema en la primera carga. Nunca pises la elección del SO del usuario con un tema claro solo porque al diseñador le gustan más los mockups claros.
Persiste la elección del usuario dentro de la app. Si el usuario cambia a oscuro dentro de la app, esa elección sobrevive a las recargas y vence a la preferencia del sistema hasta que la restablezca.
Ofrece una opción "igual que el sistema". Los usuarios que quieren que mande el ajuste del SO necesitan una forma de volver a ese comportamiento. El interruptor de tres estados (claro, oscuro, sistema) es el patrón esperado y debería lanzarse por defecto.
Probar el modo oscuro
Los bugs del modo oscuro se esconden. Un componente se ve bien en el archivo de diseño, pasa la revisión de código en el tema claro y sale con un fallo de contraste que solo aparece cuando un usuario lo abre de noche. La disciplina de pruebas tiene que ser agresiva.
La prueba de brillo. Abre el producto en un portátil al 30 por ciento de brillo en una habitación oscura. Todo lo que desaparece, todo lo que se emborrona, todo lo que brilla de forma incómoda se registra como bug. Esto detecta bordes demasiado sutiles, texto demasiado brillante y colores de acento que siguen demasiado saturados.
La auditoría de contraste. Cada cambio de tema dispara una comprobación completa de contraste en todos los pares semánticos. Herramientas como axe, WAVE o el verificador de contraste integrado de Figma detectan las regresiones que una revisión visual se pierde.
El diff de capturas. Se capturan pantallazos en modo claro y oscuro de cada pantalla clave en cada release. Los diffs visuales exponen la deriva involuntaria del tema antes de que lo haga un usuario.
La prueba en dispositivo real. Los teléfonos OLED renderizan las superficies oscuras distinto que los portátiles LCD. Un modo oscuro que se ve perfecto en un MacBook a menudo revela banding o transiciones duras en un iPhone. Prueba en teléfonos reales, no solo en el emulador de dispositivos del navegador.
Fallos comunes del modo oscuro
Tres patrones causan la mayoría de los problemas de calidad al lanzar modo oscuro. Los tres se evitan con la estructura de tokens de arriba.
La UI a medio invertir. Las superficies principales pasan a oscuro, pero componentes enterrados (modales, tooltips, páginas de marketing, pantallas de administración heredadas) siguen saliendo en modo claro. El usuario activa el oscuro y la mitad del producto vuelve al blanco al hacer clic. La solución es una auditoría de cada superficie del producto, con una lista que siga la cobertura de tema por pantalla.
El momento de marca roto. Las landing pages de marketing se quedan claras mientras el producto va a oscuro, o al revés. La identidad de marca se fragmenta a lo largo del recorrido del usuario, y el producto parece dos empresas. La solución es acordar de antemano si el sitio de marketing lanza modo oscuro. Ambas opciones son válidas, pero las dos superficies tienen que coincidir.
La regresión de accesibilidad. El modo claro sale conforme a WCAG AA, el oscuro falla en tres sitios y nadie lo revisa hasta una auditoría de cumplimiento. La solución es la capa de tokens semánticos más una comprobación automática de contraste en CI. Cada PR ejecuta un chequeo de contraste. Los fallos bloquean el merge.
Si quieres un equipo que lance el modo oscuro como una decisión de sistema de primera clase, de los tokens a las pruebas, contrata a Brainy. El modo oscuro rara vez es el problema difícil. El problema difícil es lanzar la pareja sin deriva.
FAQ
¿Es el negro puro el mejor fondo para el modo oscuro?
No. El negro puro (#000000) crea un contraste áspero con el texto blanco y elimina las pistas de profundidad visual que el ojo necesita para leer la elevación. Usa un gris oscuro con un sutil tinte de marca, normalmente en el rango de #0B0B10 a #121218. La profundidad en una interfaz oscura se lee como superficies que suben hacia el usuario, lo que requiere una superficie de partida que no sea negro puro.
¿Cómo se hace elevación en modo oscuro sin sombras?
La elevación en modo oscuro viene de la luminosidad, no de las sombras. Cada superficie elevada es ligeramente más clara que la de debajo, creando un gradiente de superficies que se apilan hacia el usuario. Una sombra oscura sutil y un brillo superior muy tenue pueden reforzar el efecto, pero la pista principal es el propio color de la superficie.
¿Debería el modo oscuro simplemente invertir los colores del tema claro?
No. Invertir satura los colores de acento hasta niveles incómodos, hunde el texto atenuado por debajo de los umbrales de contraste de WCAG y rompe el modelo de elevación que depende de las sombras. El modo oscuro es un segundo tema diseñado desde cero sobre el mismo conjunto de componentes, y luego reconciliado mediante tokens semánticos compartidos.
¿Cómo manejo imágenes y fotos en modo oscuro?
Las imágenes tomadas sobre fondos blancos rompen la continuidad del tema. Opciones: lanzar recursos paralelos para modo oscuro, añadir un contenedor claro sutil alrededor de cada imagen cuando el modo oscuro está activo, o aplicar filtros con cuidado. Las ilustraciones a menudo necesitan una variante propia para modo oscuro. Es la parte más cara del modo oscuro y la que más se omite.
¿Cómo estructuro los tokens para soportar dos temas?
Tres capas. Primitivos (valores de color en bruto), tokens semánticos (nombres basados en roles como color.surface.base) y mapas de tema (uno por tema, que resuelven cada token semántico a un primitivo). Los componentes consumen solo tokens semánticos, así que el selector de tema cambia el mapa y nada se rompe. Este patrón es lo que hace que el modo oscuro escale más allá de un equipo pequeño.
¿Mejora el modo oscuro la accesibilidad?
Para usuarios con sensibilidad a la luz, migrañas o fotofobia, sí. Para quienes necesitan texto de alto contraste o tienen percepciones de color específicas, no necesariamente. El modo oscuro es una opción de accesibilidad, no una victoria automática de accesibilidad. Un tema oscuro bien implementado cumple las reglas de contraste de WCAG con el mismo rigor que el tema claro, y uno mal implementado las incumple.
El modo oscuro es una decisión de sistema, no un interruptor
Un producto con un tema y un segundo tema roto es peor que un producto con un solo tema limpio. El modo oscuro o se lanza como un paralelo del tema claro totalmente diseñado, totalmente probado y totalmente tokenizado, o no se lanza.
Construye primero la capa de tokens. Haz la matemática del contraste después. Diseña el tema oscuro contra cada elevación, cada componente, cada contenedor de imagen. Prueba con poco brillo en dispositivos reales. Lanza ambos temas juntos o ninguno.
Si quieres trabajo de marca, web y UI que trate el modo oscuro como un compromiso a nivel de sistema y no como un interruptor de preferencia, contrata a Brainy. Dos temas, un producto, una decisión de diseño coherente.
Lecturas relacionadas
- Guía de sistemas de diseño
- Contraste de color accesible
- Lista de verificación de accesibilidad web
- Teoría del color para diseñadores
- Diseño de jerarquía visual
Want a product that ships dark mode as a system decision instead of a last-minute toggle? Brainy builds brand, web, and UI with both themes wired into the tokens from day one.
Get Started
