Dark Mode

Principios de Dark Mode

El dark mode de Flow no es una simple inversión de colores. Es una reinterpretación consciente del sistema visual que mantiene la jerarquía, accesibilidad y personalidad de marca.

Filosofía de inversión semántica

En lugar de invertir colores literalmente (blanco → negro), Flow invierte los roles semánticos de los tokens. Un token llamado surface.primary siempre significa "superficie principal" — en light mode es crema, en dark mode es charcoal. El nombre nunca cambia, solo su valor subyacente.

Reglas fundamentales

1. Conservar la jerarquía visual. La relación entre niveles de superficie (primary → secondary → tertiary) se mantiene en ambos modos. La distinción entre capas nunca se pierde.

2. El verde sigue siendo protagonista. El acento verde (#3beb64 / #72f18b) es el elemento de continuidad entre ambos modos. Se ajusta ligeramente para mantener contraste, pero nunca pierde su rol.

3. Nunca negro puro. Las superficies dark usan charcoal (#0f2c24) y darkgreen (#14382e), nunca #000000. El negro puro genera fatiga visual y rompe la calidez de marca.

4. Elevación por luminosidad, no por sombra. En dark mode, las sombras son menos visibles. La percepción de profundidad se logra con superficies ligeramente más claras en capas superiores.

Inversión Semántica Completa

Cada token semántico tiene un valor para light mode y otro para dark mode. Los nombres permanecen idénticos — solo cambian los valores subyacentes.

Surface Tokens

Text Tokens

Border & Interactive Tokens

Jerarquía de Superficies

La escalera de profundidad se mantiene en dark mode. Cada capa superior es ligeramente más clara que la anterior, creando la sensación de elevación sin depender de sombras.

Texto en Dark Mode

Los colores de texto se invierten para mantener legibilidad sobre fondos oscuros. El acento verde se aclara ligeramente (green-400 en lugar de green-500) para mejor contraste.

Componentes en Dark Mode

Cada componente adapta sus tokens semánticos automáticamente. Aquí se muestran las diferencias visuales clave.

Botones

En dark mode, el botón primario usa green-400 (#72f18b) para mayor contraste sobre fondos oscuros. El borde del botón secundario se reduce a 30% de opacidad del color inverso.

Cards

Las cards en dark mode usan surface.secondary (darkgreen) como fondo, con border sutil en #1e5c4a. La sombra aumenta opacidad para ser perceptible sobre fondos oscuros.

Inputs

Los inputs en dark mode usan fondo semi-transparente (rgba blanco al 5%) con border en #1e5c4a. En focus, el border cambia a green-400.

Feedback States

Los colores de feedback se aclaran ligeramente en dark mode para mantener contraste. Los fondos aumentan su opacidad de 8% a 12%.

Sombras y Profundidad

En dark mode, las sombras convencionales son prácticamente invisibles. La elevación se comunica mediante dos estrategias complementarias.

Estrategia dual

Luminosidad de superficie: Cada capa superior es más clara. La card (surface.tertiary = #1a4d3a) se distingue del fondo (surface.primary = #0f2c24) por su mayor luminosidad.

Sombras reforzadas: Las sombras en dark mode usan rgba(0,0,0) con mayor opacidad para ser perceptibles contra fondos oscuros.

Contraste en Dark Mode

Todas las combinaciones de texto sobre superficie deben cumplir WCAG 2.1 AA. Los ratios de contraste se verifican para cada par de tokens.

Ratios principales — Dark Mode

Código de Implementación

El dark mode se activa con la clase dark-mode en el body o el atributo data-theme="dark". Todas las custom properties se sobreescriben en un solo bloque.

CSS — Override de tokens

/* ── Dark mode semantic overrides ── */
body.dark-mode,
[data-theme="dark"] {
  /* Surfaces */
  --surface-primary: #0f2c24;
  --surface-secondary: #14382e;
  --surface-tertiary: #1a4d3a;
  --surface-inverse: #f7f5f3;
  --surface-accent: #3beb64;

  /* Text */
  --text-primary: #f0eee9;
  --text-secondary: #a8b5b1;
  --text-tertiary: #7a8b86;
  --text-inverse: #0f2c24;
  --text-accent: #72f18b;

  /* Borders */
  --border-default: #1e5c4a;
  --border-active: #72f18b;

  /* Interactive */
  --interactive-default: #72f18b;
  --interactive-hover: #3beb64;

  /* Elevation (darker, higher opacity) */
  --elevation-sm: 0 2px 4px rgba(0,0,0,0.20);
  --elevation-md: 0 4px 12px rgba(0,0,0,0.28);
  --elevation-lg: 0 8px 24px rgba(0,0,0,0.36);
}

JavaScript — Toggle con persistencia

// Toggle dark mode con localStorage
const toggle = document.getElementById('theme-toggle');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

// Inicializar desde preferencia guardada o del sistema
function initTheme() {
  const saved = localStorage.getItem('flow-theme');
  if (saved) {
    document.body.classList.toggle('dark-mode', saved === 'dark');
  } else {
    document.body.classList.toggle('dark-mode', prefersDark.matches);
  }
}

// Toggle y guardar preferencia
toggle.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  const isDark = document.body.classList.contains('dark-mode');
  localStorage.setItem('flow-theme', isDark ? 'dark' : 'light');
});

// Escuchar cambio de preferencia del sistema
prefersDark.addEventListener('change', (e) => {
  if (!localStorage.getItem('flow-theme')) {
    document.body.classList.toggle('dark-mode', e.matches);
  }
});

initTheme();

HTML — Estructura del toggle

<!-- Toggle de tema en header/nav -->
<button
  id="theme-toggle"
  class="theme-toggle"
  aria-label="Cambiar modo de color"
  role="switch"
  aria-checked="false"
>
  <span class="icon-sun">☀️</span>
  <span class="icon-moon">🌙</span>
</button>

Prueba en Vivo

Activa el toggle para ver la transición de tokens en tiempo real.

Buenas Prácticas

Reglas esenciales para implementar dark mode consistente en cualquier producto o pieza digital de Flow.

Imágenes y fotografía

Las fotografías no se invierten ni se alteran en dark mode. Sin embargo, se recomienda reducir ligeramente su brillo (filter: brightness(0.9)) para evitar que deslumbren sobre fondos oscuros. Los íconos SVG que usan currentColor se adaptan automáticamente.

Gradientes

El gradiente hero (charcoal → darkgreen → deep-green) funciona bien en ambos modos porque ya es inherentemente oscuro. Para gradientes claros usados en light mode, crear versiones dark alternativas que mantengan la dirección pero usen la paleta oscura.