11 abril 2026
Theme Toggle con animaciones brutales: cómo usar View Transitions API fácil
Vale, vamos al grano. Cambiar entre modo claro y oscuro ya no es suficiente. Si tu web todavía hace ese cambio cutre sin animación… estás perdiendo una oportunidad brutal de destacar.
La demo de https://theme-toggle.rdsx.dev/ es justo lo contrario: un ejemplo simple pero muy potente de cómo hacer transiciones entre temas que parecen magia. Y lo mejor, no necesitas un framework raro ni 200 líneas de código.
La base de todo esto es la View Transitions API, una API moderna del navegador que te permite animar cambios entre estados de la UI de forma nativa. Nada de hacks, nada de trucos raros. Directo al grano.
De hecho, el propio ejemplo te deja claro lo absurdo de simple que puede ser:
if (!document.startViewTransition) switchTheme()
document.startViewTransition(switchTheme);Ya está. Literalmente eso. Con eso puedes envolver el cambio de tema y convertirlo en una transición animada.
Aquí es donde viene lo interesante. El toggle no se limita a cambiar colores, sino que puedes meterle creatividad: máscaras circulares, efectos blur, animaciones con SVG, clip-paths… incluso GIFs si te vienes arriba.
Y esto cambia totalmente el juego. Porque ya no estás haciendo un “modo oscuro”, estás creando una experiencia.
Piensa en esto: cuando el usuario hace clic, no solo cambia el tema, siente que la web responde, que hay una transición cuidada. Eso es UX del bueno.
Además, este enfoque encaja perfecto con cómo ya funcionan los toggles clásicos. Normalmente solo cambias una clase en el <html> o guardas el estado en localStorage para recordar la preferencia del usuario . Aquí haces lo mismo… pero con esteroides visuales.
Otro punto clave: esto es totalmente personalizable. No estás atado a un estilo concreto. Puedes hacer:
- Animaciones tipo “círculo que se expande”
- Transiciones desde una esquina
- Efectos tipo eclipse
- Cambios con degradados o blur
Y todo controlado con CSS + SVG.
Si estás aprendiendo front, este tipo de recursos son oro. Porque te enseñan algo muy importante: no siempre necesitas más librerías, necesitas entender mejor el navegador.
Y sí, esto se puede integrar perfectamente con Tailwind, React, Astro o lo que quieras. Al final, el toggle sigue siendo un botón que cambia estado. Solo que ahora lo envuelves en una transición.
En resumen:
- Código mínimo
- Impacto visual máximo
- UX mucho más pro
Y sobre todo, algo que la mayoría de webs todavía no está usando. Ahí tienes ventaja.
#Frontend #JavaScript #UX #UI #WebDesign #DarkMode #CSS #SVG #ViewTransitions #DesarrolloWeb #Programación
