Crear un modo oscuro para tu sistema de diseño no debería ser un parche estético ni un experimento peligroso que rompa la identidad visual o deje de lado la accesibilidad. En mi trabajo con equipos y proyectos digitales he aprendido que un dark mode bien pensado puede reforzar la marca, mejorar la experiencia nocturna y reducir la fatiga visual—si se hace con reglas claras y variables semánticas. Aquí comparto el enfoque que uso: práctico, técnico y centrado en las personas.
Por qué el dark mode merece más que un esquema invertido
Lo primero que siempre digo es esto: no inviertas colores como atajo. El simple “fondo claro -> fondo oscuro” y “texto oscuro -> texto claro” suele producir contraste insuficiente, colores saturados que vibran, y elementos de marca que pierden su tono y legibilidad. Un buen dark mode exige replantear la jerarquía cromática y la tipografía visual, manteniendo coherencia con la identidad.
Principios que aplico desde el inicio
Usar tokens semánticos en lugar de tokens puramente cromáticos. Por ejemplo: background-primary, surface-muted, text-emphasis.Mantener contrastes que cumplan WCAG 2.1 (mínimo 4.5:1 para texto normal y 3:1 para texto grande).Preservar la personalidad de marca sin sacrificar legibilidad: ajustar saturación y brillo en lugar de cambiar matiz radicalmente.Dar control al usuario: respetar la preferencia del sistema (prefers-color-scheme) y ofrecer un interruptor manual con estado persistente.Cómo definir tu paleta dark sin perder la identidad
Empiezo transformando la paleta con reglas predecibles, no con intuición. Una metodología que uso:
Identificar los roles: fondo, superficie, borde, texto primario, texto secundario, acento, éxito, error, aviso.Para cada rol, crear una versión dark basada en luminancia y saturación. Por ejemplo: reducir la luminancia de fondos, disminuir saturación de colores de marca en superficies grandes y usar versiones ligeramente más saturadas para elementos de interacción (botones, enlaces) para que destaquen sobre fondos oscuros.Usar un color de fondo principal en torno a #0B0F14 o #121214 según la sensación que quieras (muy oscuro vs. oscuro suave). Evito el negro puro (#000000) salvo para acentos muy concretos, porque el contraste extremo cansa y genera “bloques planos”.Ejemplo práctico de tokens (CSS custom properties)
En lugar de fijar #hex directos en componentes, defino variables semánticas que luego mapeo por tema. Así:
| Token | Light | Dark |
|---|
| --bg-primary | #FFFFFF | #0B0F14 |
| --surface-muted | #F4F6F8 | #111418 |
| --text-primary | #0B1A2B | #E6EEF6 |
| --text-secondary | #5B6B7A | #A8B6C4 |
| --brand-accent | #FF6B6B | #FF8A8A |
Esta abstracción me permite ajustar solo el mapping por tema y mantener todos los componentes inalterados. Además facilita pruebas A/B y cambios iterativos.
Contrastes y accesibilidad: reglas concretas
No negocies con contrastes. Yo uso estas reglas mínimas:
Texto normal (<= 18px y peso normal): contraste >= 4.5:1.Texto grande (>= 18px bold o >= 24px normal): contraste >= 3:1.Elementos interactivos con texto (botones, inputs): cumplir 4.5:1 en su estado normal; en hover/focus mejorar visibilidad.Hay herramientas que recomiendo: axe, Lighthouse, Contrast Checker de WebAIM y la extensión Colour Contrast Analyser. En el proceso, mido con estas herramientas y ajusto la luminancia sin tocar el matiz de marca, cuando es posible.
Estrategias CSS que uso
Preferencias del sistema: utilizar @media (prefers-color-scheme: dark) para aplicar el tema automáticamente.Tema manual: agregar una clase raíz como .theme-dark o usar el atributo data-theme="dark" para permitir conmutación manual y persistencia (localStorage).Tokens dinámicos: usar custom properties en :root y en .theme-dark para hacer swapping eficiente y permitir transiciones suaves sin repintado masivo.Ejemplo mínimo:
:root { --bg-primary: #fff; --text-primary: #071826; } .theme-dark { --bg-primary: #0B0F14; --text-primary: #E6EEF6; }
Más allá de colores: sombras, bordes y elevaciones
En dark mode las sombras funcionan distinto: sombras oscuras sobre fondos oscuros desaparecen. Yo cambio las sombras por bordes sutiles o por glow invertido según el caso.
Elevaciones: en light uso sombras con opacidad baja; en dark sustituyo por bordes internos muy sutiles o variaciones del propio color de la superficie.Bordes: los bordes claros sobre fondo oscuro deben tener opacidad adecuada (ej. rgba(255,255,255,0.06)) para evitar contraste agresivo.Tratamiento de imágenes, ilustraciones y logos
Este es un punto donde se rompen muchas implementaciones. Yo sigo estas reglas:
Logos: proporcionar versiones invertidas y monocromas del logo para dark mode. No uses la versión a color si el fondo la aplasta.Imágenes fotográficas: evitar filtros globales que alteren tonos de piel. En lugar de eso, recuadro las imágenes en tarjetas con fondo neutral o añadir overlay semi-transparente para mejorar legibilidad del texto.Ilustraciones e iconografía: crear una versión con colores adaptados o usar iconos en máscara que tomen el color de texto para cambiar según el tema.Interacciones, animaciones y microcopias
El modo oscuro puede afectar la percepción del movimiento. Para que las animaciones no resulten intrusivas:
Reducir la duración y la amplitud de animaciones en dark mode para evitar fatiga visual.Asegurar estados de foco visibles (outline o box-shadow) con contraste fuerte en ambos temas.Revisar microcopias que indiquen cambios (por ejemplo, “Activar modo oscuro” / “Desactivar modo oscuro”) y accesibles con lectores de pantalla.Pruebas y checklist que uso antes de lanzar
Recorrer todas las páginas y componentes con la preferencia del sistema activada y con la clase manual para asegurar consistencia.Comprobar contraste en textos y botones con herramientas automáticas y revisión visual manual.Verificar logos, imágenes e iconos para cada estado.Probar con usuarios reales o al menos con compañeros que usen modo oscuro habitualmente.Probar en diferentes dispositivos y navegadores, y con asistentes como NVDA o VoiceOver para asegurarse de que el cambio de tema no rompe el DOM o el orden de lectura.Errores comunes que debes evitar
No respetar el contraste por estética: sacrificar legibilidad por “look” siempre sale caro.Usar colores saturados en superficies grandes: generan halos o fatiga visual.No ofrecer persistencia: el usuario activa el modo oscuro y lo pierde al recargar o en otra sesión.Ignorar imágenes y logos: fallas aquí dejan marcas poco profesionales.Implementar dark mode es una oportunidad para mejorar tu sistema de diseño: obliga a pensar en roles, accesibilidad y consistencia. Si lo haces con tokens semánticos, pruebas rigurosas y respeto por la identidad de marca, el resultado será un tema oscuro que se siente natural, mejora la experiencia y mantiene la integridad visual del producto.
