Modo Oscuro Por Qué Dos Estados Son Suficientes (Y Tres Pueden Dañar la UX)

La Trampa del Toggle de Tres Estados

Ya lo has visto: un selector de tema con opciones Claro, Oscuro y Sistema. Parece completo, pero a menudo añade carga cognitiva sin beneficio real. La pregunta clave: ¿el usuario realmente necesita un botón dedicado para 'Sistema' cuando un control de dos estados bien diseñado puede expresar los tres?

El argumento es simple: si el usuario no tiene preferencia explícita, usa la configuración del sistema operativo. Ofrece una anulación solo cuando el usuario elija activamente. Guarda esa elección en localStorage para futuras sesiones. Esto reduce el desorden visual y respeta la intención principal del usuario—leer tu contenido, no jugar con temas.

Un buen control de dos estados puede expresar los tres estados—el usuario solo necesita aplicar la anulación la primera vez que sea relevante.

No es solo minimalismo. Es entender que el cambio de tema es tangencial al objetivo del usuario. Menos UI que logra lo mismo es siempre mejor. ¡Vamos a darle!

Implementando el Patrón de Dos Estados

Aquí tienes una implementación práctica con JavaScript puro y CSS. El toggle solo muestra lo opuesto al tema efectivo actual. Si el sistema está claro, muestra un botón 'Oscuro'; si oscuro, muestra 'Claro'. Al hacer clic, se establece una anulación explícita en localStorage.

// theme-toggle.js
const getPreferredTheme = () => {
  const stored = localStorage.getItem('theme');
  if (stored === 'light' || stored === 'dark') return stored;
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};

const applyTheme = (theme) => {
  document.documentElement.setAttribute('data-theme', theme);
  // Actualiza la etiqueta del toggle para mostrar la *otra* opción
  const toggle = document.getElementById('theme-toggle');
  toggle.textContent = theme === 'dark' ? '☀️ Claro' : '🌙 Oscuro';
};

const toggleTheme = () => {
  const current = getPreferredTheme();
  const next = current === 'dark' ? 'light' : 'dark';
  localStorage.setItem('theme', next);
  applyTheme(next);
};

// Inicialización
document.addEventListener('DOMContentLoaded', () => {
  applyTheme(getPreferredTheme());
  document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
});

// Escucha cambios del sistema si no hay anulación
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  if (!localStorage.getItem('theme')) {
    applyTheme(e.matches ? 'dark' : 'light');
  }
});

/* styles.css */
:root {
  --bg: #ffffff;
  --text: #000000;
}

[data-theme="dark"] {
  --bg: #121212;
  --text: #e0e0e0;
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.2s, color 0.2s;
}

El botón puede ser un simple <button id="theme-toggle">🌙 Oscuro</button> en el encabezado. Sin tercera opción. ¡Fíjate en lo simple que es!

Cuándo Tres Estados Realmente Tienen Sentido

El toggle de dos estados no es ley universal. Hay dos escenarios donde un control de tres estados (Claro / Oscuro / Sistema) se justifica:

1. Panel de configuración dedicado – Si el toggle está en una página separada de preferencias, no en la navegación principal, los usuarios esperan más control granular. El costo cognitivo es menor porque ya están en un contexto de 'configuración'.
2. Más de dos esquemas de color – Si tu sitio ofrece múltiples temas (ej.: sepia, alto contraste, etc.), un toggle de dos estados no puede expresar todas las opciones. Entonces un dropdown o control tri-state se hace necesario.

Trampas a Evitar

• No muestres la opción 'Sistema' en el encabezado – Distrae del contenido principal. Los usuarios rara vez necesitan revertir explícitamente al sistema después de establecer una anulación.
• Maneja el caso 'revertir al sistema' con cuidado – Si el usuario alterna de Claro (sistema) a Oscuro, y luego vuelve a Claro, tu código debe guardar 'claro' como anulación explícita o limpiar la anulación. Ambos son aceptables; sé consistente. La mayoría no lo notará hasta que el tema del SO cambie, y corregirlo es un clic.
• Prueba con prefers-color-scheme – Asegúrate de que tu CSS respete la media query cuando no haya anulación. Usa localStorage solo para elecciones explícitas.

Recuerda: el toggle de tema no es la intención principal del usuario. Optimiza para el contenido, no para el control.

El Mejor Toggle Puede Ser Ningún Toggle

La conclusión definitiva: si tu sitio respeta prefers-color-scheme y no ofreces anulación manual, ya estás adelante. Un toggle de dos estados es un buen compromiso cuando quieres dar control sin desorden. Un toggle de tres estados rara vez vale la carga cognitiva extra.

Próximos pasos: Audita tu selector de tema actual. Pregunta: ¿la opción 'Sistema' agrega valor real o es solo ruido? Prueba el patrón de dos estados y mide el feedback de los usuarios. Para más sobre diseño con incertidumbre y pensamiento probabilístico en interfaces de IA, checa nuestro insight sobre diseño con incertidumbre. Y si estás escalando modernización con agentes de IA, mira cómo Azure y GitHub Copilot están cambiando el juego.

Fuente: CSS-Tricks