Story: The name of modern web development tools
If you’re a web designer, you may have heard the name Variables. Webflow introduced Variables in 2023. I had heard of them in Figma before, but I don’t use the feature often.
When checking the latest web design trends, I often came across websites with dark backgrounds. Some of them had a sun-and-moon toggle switch for light and dark mode. I wanted to know how to achieve this without much hassle. According to my research, Webflow can do it using Variables.
What is Webflow?
🌎 Webflow: The Web Development Platform Of The Future
Webflow is created for a designer who is not good at programming. Once you master Webflow, you can develop an interactive website yourself.
Introducing Variables in Webflow
©Webflow
Persistent Light/Dark Toggle in Webflow
©Timothy Ricks
How to Webflow: Dark & Light mode toggle – Tutorial
©pixelgeek
This was before Webflow announced Variables. Even so, we could implement a dark/light mode toggle. However, it would be time-consuming if I had 10+ pages. Therefore, the announcement of Variables was big news for the Webflow community.
Light/Dark mode switch (Using variables) by Andy Hooke
I watched a couple of YouTube videos, but they didn’t quite work for me. Then I searched Made in Webflow and found the solution. I had an ongoing project, and this method worked perfectly.
Extra: Animate Webflow Color Modes
©Timothy Ricks
Instead of dark/light mode, transitioning the background color can also be useful. Timothy is well-known for mastering Webflow, but he often uses custom coding, which can be challenging for non-coding.
Create a wow experience (I actually impressed the variable as a Webflow designer)
We’re in a mobile-first era, but I still really enjoy browsing websites on a laptop. It’s just easier to open multiple windows, scan content quickly, and take everything in at a glance.
While checking how my project looked on mobile, I noticed my iPhone automatically switched to dark mode. It actually made a lot of sense—easier on the eyes, especially at night. A smart, practical feature.
That said, I usually only use my phone with a clear purpose in mind. Maybe I’m a bit old-school, but I’ve never shopped for clothes or gadgets on mobile. Just the essentials—Uber, street parking, or grabbing a Starbucks. Still no DoorDash or Amazon for me. Maybe I need to catch up.
Anyway, the Webflow video course was a great experience. Time to keep exploring and learning more!
