Guía de Diseño de Modo Oscuro

El modo oscuro ha pasado de ser una preferencia de nicho a una expectativa estándar. El 82% de los usuarios lo prefieren, y las grandes empresas como Apple, Google y Microsoft lo han adoptado como característica principal.

1.1 ¿Por qué el Modo Oscuro?

1.2 Lo que Aprenderás

Esta guía te convertirá en experto en diseño de modo oscuro:

1. Ciencia del color en interfaces oscuras
2. Errores comunes y cómo evitarlos
3. Sistema de elevación y profundidad
4. Adaptación de colores y contraste
5. Implementación técnica con CSS
6. Transiciones suaves entre modos
7. Testing y accesibilidad

Entender la fisiología del ojo es crucial para diseñar interfaces oscuras efectivas.

2.1 Cómo Percibimos la Luz

Nuestros ojos tienen dos tipos de fotorreceptores:

2.2 El Problema del Contraste Excesivo

Texto blanco puro (#FFFFFF) sobre negro puro (#000000) causa:

• Efecto de halo: El texto parece "brillar" y difuminarse
• Fatiga visual: La pupila se contrae/dilata constantemente
• Afterimage: Imágenes residuales al mirar a otro lado

2.3 La Regla del 87%

Material Design recomienda que el texto principal en modo oscuro tenga 87% de opacidad sobre el fondo, no 100%. Esto reduce el contraste a niveles cómodos manteniendo la legibilidad.

Evita estos errores que arruinan la experiencia de usuario.

Un sistema de colores bien diseñado es la base de un modo oscuro exitoso.

4.1 Fondos: Sistema de Capas

Material Design usa un sistema de elevación donde superficies más elevadas son más claras:

4.2 Texto: Jerarquía con Opacidad

4.3 Colores de Marca

Ajusta tus colores de marca para dark mode:

• Reduce saturación: -10% a -20%
• Aumenta luminosidad: +10% a +20%
• Verifica contraste: Mínimo 4.5:1 con el fondo

En modo oscuro, la elevación se comunica con luminosidad, no con sombras.

5.1 El Concepto de Overlay

Cada nivel de elevación añade una capa semi-transparente blanca sobre el fondo base:

5.2 Implementación CSS

/* Sistema de elevación dark mode */
.surface-0 { background: #121212; }
.surface-1 { background: #1E1E1E; } /* 5% overlay */
.surface-2 { background: #232323; } /* 7% overlay */
.surface-3 { background: #252525; } /* 8% overlay */
.surface-4 { background: #272727; } /* 9% overlay */

/* O con CSS custom properties */
:root[data-theme="dark"] {
  --surface-base: #121212;
  --surface-1: color-mix(in srgb, white 5%, #121212);
  --surface-2: color-mix(in srgb, white 7%, #121212);
}

Cada componente necesita consideraciones específicas para modo oscuro.

6.1 Botones

6.2 Inputs y Forms

6.3 Cards

En dark mode, las cards usan elevación en lugar de sombras:

• Fondo más claro que la página base
• Bordes sutiles opcionales (#333)
• Sin box-shadow o muy sutil

6.4 Iconos

Los iconos necesitan ajustes de opacidad:

• Activos: 87% opacidad
• Inactivos: 60% opacidad
• Deshabilitados: 38% opacidad

Los colores semánticos (éxito, error, warning, info) necesitan ajustes específicos para dark mode.

7.1 El Problema de los Colores Brillantes

Los colores semánticos estándar son demasiado intensos sobre fondos oscuros:

7.2 Tabla de Conversión

7.3 Fondos de Alertas

En dark mode, usa fondos semi-transparentes en lugar de colores sólidos:

/* Light mode */
.alert-success { background: #DCFCE7; }

/* Dark mode */
.alert-success { background: rgba(74, 222, 128, 0.15); }

Las imágenes y videos necesitan tratamiento especial en modo oscuro.

8.1 El Problema del Brillo

Imágenes brillantes sobre fondos oscuros crean un contraste incómodo. Soluciones:

[data-theme="dark"] img {
  filter: brightness(0.9);
}

.image-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

<picture>
  <source srcset="hero-dark.jpg" 
          media="(prefers-color-scheme: dark)">
  <img src="hero-light.jpg" alt="Hero">
</picture>

8.2 Logos y SVGs

Los logos necesitan versiones específicas para dark mode:

• Logo oscuro: Para fondos claros
• Logo claro: Para fondos oscuros
• Logo monocromático: Que funcione en ambos

8.3 Videos

Para videos embebidos, considera:

• Bordes redondeados con fondo oscuro
• Thumbnails con overlay sutil
• Controles personalizados que respeten el tema

Múltiples formas de implementar dark mode, cada una con pros y contras.

9.1 CSS Custom Properties (Recomendado)

:root {
  /* Light mode (default) */
  --color-bg: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --color-primary: #3B82F6;
  --color-border: #E5E7EB;
}

[data-theme="dark"] {
  --color-bg: #121212;
  --color-surface: #1E1E1E;
  --color-text: rgba(255,255,255,0.87);
  --color-text-secondary: rgba(255,255,255,0.60);
  --color-primary: #60A5FA;
  --color-border: #333333;
}

/* Uso */
body {
  background: var(--color-bg);
  color: var(--color-text);
}

9.2 Detección de Preferencia del Sistema

/* CSS */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    /* ... resto de variables dark */
  }
}

/* JavaScript */
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

// Escuchar cambios
prefersDark.addEventListener('change', (e) => {
  document.documentElement.dataset.theme = e.matches ? 'dark' : 'light';
});

9.3 Toggle Manual con Persistencia

// Leer preferencia guardada o del sistema
function getTheme() {
  const saved = localStorage.getItem('theme');
  if (saved) return saved;
  return window.matchMedia('(prefers-color-scheme: dark)').matches 
    ? 'dark' 
    : 'light';
}

// Aplicar tema
function setTheme(theme) {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem('theme', theme);
}

// Toggle
function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  setTheme(current === 'dark' ? 'light' : 'dark');
}

// Inicializar
setTheme(getTheme());

9.4 Evitar Flash de Tema Incorrecto

<!-- En el <head>, ANTES de cualquier CSS -->
<script>
  (function() {
    const theme = localStorage.getItem('theme') || 
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    document.documentElement.dataset.theme = theme;
  })();
</script>

Una transición bien diseñada hace que el cambio de tema sea agradable en lugar de brusco.

10.1 Transición Básica

/* Transición global */
* {
  transition: background-color 200ms ease, 
              color 200ms ease,
              border-color 200ms ease;
}

/* Excluir elementos que no deben animar */
img, video, iframe {
  transition: none;
}

10.2 Transición Avanzada con View Transitions API

// Navegadores modernos
function toggleTheme() {
  if (!document.startViewTransition) {
    // Fallback para navegadores sin soporte
    setTheme(getNextTheme());
    return;
  }
  
  document.startViewTransition(() => {
    setTheme(getNextTheme());
  });
}

/* CSS para la animación */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
}

::view-transition-old(root) {
  animation: fade-out 300ms ease;
}

::view-transition-new(root) {
  animation: fade-in 300ms ease;
}

10.3 Efecto de Expansión Circular

Un efecto premium donde el nuevo tema se expande desde el botón de toggle:

function toggleWithCircle(event) {
  const x = event.clientX;
  const y = event.clientY;
  const endRadius = Math.hypot(
    Math.max(x, window.innerWidth - x),
    Math.max(y, window.innerHeight - y)
  );
  
  const transition = document.startViewTransition(() => {
    setTheme(getNextTheme());
  });
  
  transition.ready.then(() => {
    document.documentElement.animate(
      { clipPath: [
        `circle(0px at ${x}px ${y}px)`,
        `circle(${endRadius}px at ${x}px ${y}px)`
      ]},
      { duration: 500, easing: 'ease-out', pseudoElement: '::view-transition-new(root)' }
    );
  });
}

El modo oscuro tiene sus propios desafíos de accesibilidad.

11.1 Contraste WCAG

Los requisitos de contraste son los mismos, pero más difíciles de lograr:

11.2 Focus States

Los indicadores de focus deben ser muy visibles en dark mode:

[data-theme="dark"] :focus-visible {
  outline: 2px solid #60A5FA;
  outline-offset: 2px;
}

/* O con box-shadow para más visibilidad */
[data-theme="dark"] :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
}

11.3 Usuarios con Sensibilidad a la Luz

Algunos usuarios necesitan modo oscuro por razones médicas:

• Migrañas: La luz brillante puede desencadenarlas
• Fotofobia: Sensibilidad extrema a la luz
• Astigmatismo: El texto claro sobre oscuro puede ser más difícil

11.4 Respeta las Preferencias del Usuario

/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Respetar prefers-contrast */
@media (prefers-contrast: more) {
  [data-theme="dark"] {
    --color-text: #FFFFFF;
    --color-bg: #000000;
  }
}

Un checklist completo para asegurar que tu modo oscuro funciona perfectamente.

12.1 Checklist de Testing

12.2 Herramientas de Testing

• Chrome DevTools: Rendering > Emulate CSS prefers-color-scheme
• Firefox: about:config > ui.systemUsesDarkTheme
• Contrast Checker: WebAIM, Colour Contrast Analyser
• Lighthouse: Auditoría de accesibilidad

12.3 Testing en Dispositivos

Prueba en diferentes condiciones:

• Pantallas OLED vs LCD
• Diferentes niveles de brillo
• Luz ambiente (día vs noche)
• iOS y Android (diferentes implementaciones)

Analicemos cómo las mejores apps implementan modo oscuro.

13.1 Twitter/X

13.2 Slack

13.3 Discord

13.4 GitHub