Transiciones suaves de modo claro y oscuro: tokens, CSS y movimiento
Cómo crear un cambio de tema claro/oscuro que respete la configuración del sistema, evite un flash durante la carga, diseñe controles nativos y anime sin perjudicar la accesibilidad.
Idea clave
Cree temas en tokens semánticos, siga la configuración del sistema con el esquema de colores preferido de forma predeterminada, permita que las personas lo anulen y establezca la propiedad del esquema de colores para que los controles de formulario y las barras de desplazamiento coincidan. Aplique el tema guardado antes de que se procese la página para evitar un flash. Mantenga la animación del cambio breve, como un fundido cruzado rápido o una transición de vista, y omítala cuando el movimiento reducido esté activado.
Comenzar desde la configuración del sistema
La función multimedia de combinación de colores preferida le indica si el usuario ha solicitado a su sistema operativo un tema claro u oscuro. Úselo como predeterminado y agregue un interruptor en la aplicación que lo anule y se recuerde.
Tema con tokens, sin anulaciones
Defina colores como tokens semánticos (superficie, texto, borde, acento) y asigne a cada tema sus propios valores, generalmente como propiedades personalizadas CSS en el elemento raíz. Entonces los componentes nunca cambian entre temas; sólo los valores simbólicos lo hacen. Este es el mismo enfoque de token de tres niveles que se utiliza para los sistemas de diseño multimarca.
No te olvides de los controles nativos
MDN explica que la propiedad de esquema de color le dice al navegador qué esquemas admite un elemento, lo que cambia los colores predeterminados de los controles de formulario, barras de desplazamiento y otras interfaces de usuario integradas. Sin él, una página oscura puede mostrar entradas y barras de desplazamiento de color blanco brillante.
Evite el flash en carga
Si JavaScript aplica el tema guardado después de que se muestre la página, las personas ven un destello del tema incorrecto. Aplíquelo lo antes posible, con una pequeña secuencia de comandos en línea en el encabezado del documento o un atributo renderizado por el servidor, antes de que se pinte la hoja de estilo.
Anima el interruptor con cuidado.
Un breve fundido cruzado, de entre 150 y 250 milisegundos, hace que el cambio parezca deliberado. Evite realizar la transición de cada propiedad de color en cada elemento, lo que puede resultar lento en páginas grandes; una sola instantánea de transición de vista suele ser más fluida. Haga que la palanca sea clara, con una etiqueta o información sobre herramientas, y elimine la animación cuando el movimiento reducido esté activado.
Fragmento de implementación en producción
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Principios clave para recordar
- Por defecto prefiere el esquema de color; dejar que la gente lo anule y lo recuerde
- Tema con tokens semánticos, no anulaciones por componente
- Establecer esquema de color para que coincidan los controles nativos
- Aplicar el tema guardado antes de pintar por primera vez.
- Mantenga la animación del cambio breve y respete el movimiento reducido.
Preguntas frecuentes
Fuentes
- prefers-color-scheme — Documentos web MDN
- color-scheme — Documentos web MDN
- View Transition API — Documentos web MDN