Mastering GSAP Interactions in Webflow – Part 7: Building a Persistent Light/Dark Mode Toggle
In this lesson of Mastering GSAP Interactions in Webflow, we build a complete and persistent light/dark mode switch from scratch.
But this isn’t just about toggling colors.
We start by structuring a proper Variable-based color system, defining a dedicated Dark Mode as a manual Variable Mode, and connecting every relevant color property across the project to that system.
Then we build the toggle itself using Webflow’s new GSAP-powered interaction system, leveraging the Set action to manage theme state through classes instead of directly animating properties.
To improve the visual experience, we introduce a controlled transition system that ensures smooth color shifts without interfering with hover, scroll, or other animations.
Finally, we add a small layer of JavaScript to:
✅ Persist the user’s theme preference using localStorage
✅ Respect the user’s system color preference (prefers-color-scheme)
✅ Prevent flickering by applying the correct theme before the page renders
This lesson combines:
✔ Variables
✔ GSAP interactions
✔ CSS
✔ Lightweight JavaScript
…into a clean, scalable theme management system you can reuse in real projects.
📂 Helpful Resources:
🔗 Supasaito: https://www.supasaito.com?utm_source=...
💻 Link to the cloneable: https://webflow.com/made-in-webflow/w...
Neon Glow Effect Using Variables, Modes & Component Variants: • Neon Glow Effect in Webflow — Using Variab...
Notable Free Webflow Template: https://webflow.com/templates/html/no...
🎵 Spotify recommendation: “Come Neve” – Giorgia, Marco Mengoni👇
• Giorgia, Marco Mengoni - Come neve
🔥 If you liked the video, feel free to leave a comment, hit the like button, and subscribe to my channel. 😁
Or you can gently press the “Thank You” button! ♥️
---
My Webflow public profile:
https://webflow.com/@francescocastro
We can talk on LinkedIn:
/ francescocastronuovo
Or we can get to know each other on X:
https://x.com/francescoflow
Or why not? Even on Instagram:
/ francescocastronuovo
---
00:00 Intro
1:28 Defining light and dark mode with variables and variable modes
7:03 Implementing the color mode toggle button
9:32 Implementing the light/dark switch interaction
18:58 Leveraging CSS to add a smooth color mode transition
21:21 Integrating the smooth transition within GSAP interaction
24:41 Leveraging JavaScript to create a persistent color mode switcher
29:34 Outro & Music Recommendation
#webflow #gsap #madeinwebflow #webflowtutorial #nocode