Una consultora utiliza un azul intenso y fondos blancos en su identidad. Al incorporar un tema oscuro, cambia el fondo por negro y descubre que el logo pierde partes, los enlaces apenas se distinguen y las tarjetas parecen botones. El tema oscuro necesita decisiones propias sobre contraste y jerarquía. Puede conservar la personalidad de la marca sin repetir exactamente todos los valores del tema claro. Conviene diseñarlo como una variante completa del sistema visual y comprobarlo en tareas, además de observar capturas aisladas.
Define qué elementos deben permanecer reconocibles
Identifica los rasgos que sostienen la identidad: formas del logo, tipografía, estilo de imágenes y un color de acento, por ejemplo. Decide cuáles pueden adaptarse para funcionar sobre superficies oscuras. El azul de una gran zona decorativa no necesariamente sirve como color de texto pequeño. Prepara una variante del logo aprobada para ese fondo y evita aplicar filtros generales a todas las imágenes. Una fotografía de producto debe conservar una representación coherente con lo que muestra. Las adaptaciones deben documentarse como decisiones del sistema, en lugar de convertirse en excepciones improvisadas para cada página.
Asigna colores por función y estado
Crea combinaciones para fondo general, superficies elevadas, texto principal, texto secundario, enlaces y controles. Revisa también foco, selección, error y desactivación. No basta con invertir colores: un estado que se distinguía mediante sombra puede necesitar otra señal en un entorno oscuro. Mide contraste en las parejas que realmente aparecen juntas y comprueba que el color no sea la única forma de comunicar información. Para la consultora, las tarjetas informativas y los botones deben seguir diferenciándose. Prueba párrafos largos, formularios y navegación, donde los problemas de jerarquía suelen ser más evidentes que en una portada decorativa.
Acuerda cómo se elige el tema
El navegador puede exponer la preferencia de esquema de color mediante prefers-color-scheme. Decide con el equipo si el sitio seguirá esa preferencia, ofrecerá una elección explícita o combinará ambas posibilidades. Si existe un selector, su comportamiento debe ser comprensible y consistente durante la navegación. Define qué ocurre al volver al sitio y quién controla esa decisión. No describas el tema oscuro como universalmente mejor para todas las personas; su utilidad depende del contexto y de preferencias distintas. El objetivo es ofrecer una presentación cuidada que no pierda funcionalidad al cambiar la apariencia de la interfaz.
Recorre la web completa en ambas variantes
Revisa encabezado, pie, formularios, mensajes, imágenes transparentes y componentes de terceros que formen parte del recorrido. Abre ventanas, activa errores y navega con teclado para comprobar estados que una captura inicial no muestra. Verifica las páginas con poco contenido y aquellas con tablas o documentos. Registra fallos por componente para corregirlos de manera consistente. Cuando se agregue una sección nueva, ambas variantes deben formar parte de su revisión. Mantener un tema oscuro supone sostener esa comprobación con el tiempo; si solo se prueba durante el lanzamiento, las actualizaciones pueden volver a introducir combinaciones ilegibles o recursos invisibles.
DE LA LECTURA A LA ACCIÓN
Para aplicar hoy
- Conserva rasgos de identidad mientras adaptas las combinaciones de color.
- Revisa superficies, texto y todos los estados de los controles.
- Define la elección del tema y prueba recorridos completos en ambas variantes.
Fuentes y referencias
Documentación para profundizar. Los ejemplos de esta guía son didácticos.