How can I enable a dark mode option using Webflow in 2020? I've heard it involves triggers and there might be some discussions on the Webflow forums about it. Can you provide a detailed explanation? Thank you!
TL;DR
- Create separate light and dark style classes for elements (e.g.,
.bg-light,.bg-dark) and design your site in Light Mode by default. - Add a toggle switch and use Webflow Interactions to switch visibility or classes to enable Dark Mode.
- Optionally, use JavaScript with localStorage to remember user mode preference across pages.
To enable a dark mode toggle in Webflow (as of 2020), you'll need to use a combination of Webflow interactions, custom classes, and possibly a bit of JavaScript for state persistence. Here's a step-by-step process you can follow:
1. Design Light and Dark Versions
- Create duplicate style elements (like text colors, background colors) with separate Light Mode and Dark Mode classes.
- For example:
- Use
.bg-lightand.bg-darkfor background elements. - Use
.text-lightand.text-darkfor typography elements. - Build and style your design in Light Mode by default, then add the Dark Mode versions using combo classes or alternate classes.
2. Add Mode Toggle Button or Switch
- Insert a toggle switch or button into your Nav Bar or Header—this allows users to switch between modes.
- Name the switch something like
dark-mode-toggleso it's easy to reference.
3. Set Up Interactions for Switching Modes
- Go to Webflow Interactions (IX2).
- Create a new click animation for the toggle button.
- In the animation, set up actions that:
- Hide Light Mode elements (set opacity to 0 or display: none).
- Show Dark Mode elements (set opacity to 100 or display: block).
- Or use Webflow’s
Add Class/Remove Classinteractions to apply.dark-mode-activeto the<body>or a main wrapper. - Make sure every section that should change on toggle responds to that class change (i.e., uses combo classes like
.section.dark).
4. (Optional) Use Custom Code to Persist Mode Across Pages
- Webflow interactions don’t remember state across pages, so to keep Dark Mode active when navigating:
- Add a simple JS script in the Project Settings > Custom Code or the Page Settings > Before </body> tag.
- Use
localStorageto save the current mode:- When the toggle is clicked, save a key:
localStorage.setItem('mode', 'dark')or'light'. - On
window.onload, check forlocalStorage.getItem('mode')and apply the.dark-mode-activeclass to the<body>if needed.
- When the toggle is clicked, save a key:
5. Test Thoroughly
- Preview and test responsiveness to ensure all elements update correctly when modes switch.
- Make sure the interaction is applied to every page if the toggle exists site-wide.
Summary
To enable Dark Mode in Webflow (2020), create alternate styles for each element, use click-based interactions to toggle visibility or classes, and optionally add custom JavaScript for state persistence. This approach was widely used by the Webflow community in 2020 before native theming features were considered.