Diseño para temas claros y oscuros

Probablemente lo hayas sentido sin poder nombrarlo. Abres una aplicación tarde por la noche y la pantalla emite una luz blanca intensa en una habitación oscura, te encoges y buscas el control deslizante de brillo. Luego cambias la misma aplicación a su apariencia más oscura y te relajas un poco. Ese pequeño momento de alivio es la razón por la que diseñar para temas claros y oscuros se ha convertido discretamente en una expectativa normal en lugar de un extra ingenioso. La gente quiere que el sitio web se adapte a la habitación en la que se encuentra.

Esta guía trata sobre la creación de un sitio que se vea deliberado en ambos modos, no uno en el que el modo oscuro sea una ocurrencia tardía y precipitada con texto gris flotando sobre un fondo casi negro. Cubriremos cómo funcionan realmente los temas por debajo, cómo elegir colores que se adapten a ambos, qué hacer con las imágenes y las sombras, las trampas de accesibilidad que deben evitarse y cómo probarlo todo sin perder el fin de semana. No necesitas escribir código para seguirlo, solo para comprender las elecciones que hacen que un tema se sienta terminado.

Lo que realmente entendemos por tema

Un tema es simplemente un conjunto coordinado de colores y superficies que comparte todo el sitio. Un tema claro utiliza texto oscuro sobre fondos claros. Un tema oscuro invierte eso, utilizando texto claro sobre fondos oscuros. El truco es que no estás diseñando dos sitios sin relación. Estás diseñando un sistema con dos atuendos, y el objetivo es que ambos atuendos parezcan pertenecer a la misma marca.

Si deseas una visión más completa de los argumentos para ofrecer una opción más oscura en primer lugar, las ventajas y desventajas se exponen bien en sitios web en modo oscuro. Este artículo asume que has decidido admitir ambos y ahora quieres que se sientan pulidos en lugar de ensamblados.

Piensa en tokens, no en colores fijos

La idea más útil en la creación de temas es el token de color. En lugar de decir "este encabezado es azul marino oscuro", dices "este encabezado usa el color de texto principal", y luego defines lo que significa ese token en cada tema. En el modo claro, el token de texto principal podría ser casi negro, y en el modo oscuro se vuelve casi blanco. Debido a que cada encabezado apunta al mismo token, cambiar de tema los actualiza a todos a la vez.

Este enfoque de nomenclatura mantiene los dos temas sincronizados y evita que busques colores perdidos por todo el sitio. Normalmente, necesitas tokens para fondos, superficies como tarjetas, texto principal y secundario, bordes, y un pequeño conjunto de colores de acento y estado, como el de éxito y error. Si eliges bien esos nombres, el resto del trabajo se convierte en rellenar dos valores por token en lugar de rediseñar cada pantalla.

Mantén un color de marca anclado

El color principal de tu marca, el que la gente asocia contigo, debe seguir siendo reconocible en ambos temas. Puede necesitar una versión ligeramente más clara o más saturada en el modo oscuro para que no desaparezca, pero la familia debe sentirse igual. Aquí es donde el pensamiento más amplio en fuentes y colores para tu sitio web y la guía a nivel de marca en tipografía de marca dan sus frutos, porque una identidad consistente hace que ambos modos se sientan intencionados.

El modo oscuro no es solo el modo claro invertido

El error más común es tomar un diseño claro e invertir literalmente cada color. El texto blanco puro sobre negro puro es duro y puede hacer que el texto tiemble o parezca que vibra, un efecto conocido como halación. Los temas oscuros reales son más suaves. Los fondos suelen ser de un gris muy oscuro en lugar de negro absoluto, y el texto es de un blanco roto en lugar de un blanco cegador. El contraste sigue siendo fuerte, simplemente no es punitivo.

Las superficies también se comportan de manera diferente. En el modo claro, se separa una tarjeta del fondo con una sombra. En el modo oscuro, las sombras apenas se notan, por lo que se separan las superficies haciéndolas ligeramente más claras que el fondo. Una tarjeta que flota sobre la página es un poco más brillante, no más oscura. Lograr esta superposición correcta es lo que hace que una interfaz oscura se sienta profunda en lugar de plana.

Ten en cuenta tu contraste en ambas direcciones

La accesibilidad es donde muchos sitios de doble tema fallan discretamente. Un gris que se lee perfectamente sobre un fondo blanco puede volverse ilegible sobre uno oscuro, y lo contrario también es cierto. Tienes que verificar el contraste por separado en cada tema, no asumir que aprobar uno significa aprobar el otro. Las pautas de accesibilidad ampliamente utilizadas establecen relaciones de contraste mínimas entre el texto y su fondo, y cumplirlas en ambos modos es innegociable si quieres que todos puedan leer tu contenido.

Este es el mismo cuidado que subyace a los conceptos básicos de accesibilidad web. Presta especial atención al texto secundario, al texto de marcador de posición en los formularios y a los estados deshabilitados, que son los elementos con más probabilidades de quedar por debajo del umbral cuando cambias de tema.

Gestiona las imágenes, logotipos e iconos con criterio

Las fotos suelen sobrevivir a un cambio de tema, pero pueden parecer rectángulos brillantes sobre una página oscura. Un borde sutil o una ligera atenuación de las imágenes muy brillantes las ayuda a encajar más cómodamente. Los logotipos y los iconos necesitan más atención. Un logotipo diseñado para un fondo blanco puede desaparecer o parecer pesado sobre uno oscuro, por lo que a menudo necesitarás una variante clara del logotipo para el modo oscuro.

Los iconos dibujados como líneas o formas simples son los más fáciles porque puedes colorearlos con un token, por lo que se recolorean automáticamente. Las ilustraciones detalladas a todo color son más complicadas y a veces necesitan una segunda versión. Esta es parte de la razón por la que las imágenes simples y flexibles tienden a envejecer mejor, un tema explorado en elegir imágenes para tu sitio web.

Respeta la elección del visitante

La mayoría de los dispositivos modernos permiten a las personas establecer una preferencia de sistema global para el modo claro u oscuro. Un sitio bien construido puede detectar esa preferencia e iniciar con el tema correspondiente, de modo que un visitante que mantiene su teléfono en modo oscuro aterriza automáticamente en tu tema oscuro. Esa pequeña cortesía hace que el sitio se sienta atento desde el primer segundo.

También es una buena práctica ofrecer un interruptor manual para que las personas puedan anular la configuración predeterminada si lo desean, y recordar su elección en futuras visitas. El interruptor debe ser fácil de encontrar pero no llamativo, a menudo ubicado en el encabezado o pie de página. Bien hecho, este respeto por la preferencia es exactamente el tipo de detalle que contribuye a un sitio web de aspecto profesional.

Mantén el diseño estable en todos los temas

Cambiar de tema debe cambiar los colores y las superficies, no mover los elementos. Si tu tema oscuro utiliza un espaciado o tamaños de fuente diferentes, el sitio parecerá dos productos distintos. Apóyate en un sistema de cuadrícula y diseño consistente para que la estructura permanezca idéntica y solo cambie la paleta. El visitante debe sentir que ha atenuado las luces en la misma habitación, no que ha entrado en un edificio nuevo.

Observa los estados intermedios

Los efectos de pasar el ratón, los anillos de enfoque, los elementos seleccionados y los estados de carga deben definirse en ambos temas. Son fáciles de olvidar porque solo aparecen al interactuar, pero son precisamente donde un tema a medio terminar muestra sus costuras. Un botón que se ve muy bien en reposo pero tiene un estado de pasar el ratón invisible en el modo oscuro socava el pulido de todo lo que lo rodea. La misma atención al detalle que mejora la jerarquía visual se aplica también a estos momentos tranquilos.

No permitas que un segundo tema ralentice el sitio

Soportar dos temas no debería duplicar el peso de tu sitio. Un error común es cargar dos conjuntos completos de imágenes, iconos o estilos y enviarlos a cada visitante, lo que silenciosamente infla la página y la ralentiza. El mejor enfoque es compartir todo lo posible entre los temas y solo intercambiar el puñado de cosas que realmente difieren, como una variante de logotipo o algunos valores de color. La estructura, el diseño y la mayoría de los activos permanecen igual.

También vale la pena evitar un destello discordante cuando la página se carga por primera vez, donde un visitante ve brevemente el tema incorrecto antes de que el correcto se ajuste. Manejar la preferencia temprano, antes de que se pinte la página, mantiene la experiencia fluida. Tratar el tema como parte de la velocidad general en lugar de como un complemento es la misma mentalidad detrás de un sitio que se siente rápido y considerado, y da sus frutos a medida que tu sitio crece con el tiempo.

Prueba como lo haría una persona real

La única forma de saber si tus temas funcionan es usarlos. Visualiza cada página importante en ambos modos, en un teléfono y en una pantalla más grande, en una habitación luminosa y en una tenue. Fíjate específicamente en los formularios, tablas, alertas y cualquier lugar donde el color tenga significado. Pide a un par de personas que no participaron que activen el interruptor y te digan si algo parece roto o difícil de leer.

Integra esta verificación en tu proceso más amplio en lugar de tratarla como un apuro final. Si estás planeando una actualización, el tema se alinea naturalmente con el tipo de pensamiento prospectivo en preparar tu sitio web para el futuro. Y si deseas ayuda para que ambos temas se sientan realmente terminados, siempre puedes contactarnos.

Preguntas frecuentes

Referencias

1. W3C. "Pautas de Accesibilidad para el Contenido Web (WCAG)." w3.org.
2. Nielsen Norman Group. "Modo Oscuro vs. Modo Claro." nngroup.com.
3. Apple. "Pautas de Interfaz Humana: Modo Oscuro." developer.apple.com.