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 combo classes like
.dark .elementfor dark styles and apply them when thedarkclass is added to<body>. - Add a toggle button and use Webflow interactions to add/remove the
darkclass on click. - Optionally, use custom JavaScript and
localStorageto remember the user’s dark mode preference.
To enable a dark mode toggle in Webflow (as of 2020), you need to use a combination of Webflow interactions (triggers) and custom classes or attributes to switch between light and dark styles.
1. Create Light and Dark Classes
- Style your elements (e.g., body, headings, buttons) with default light mode styles.
- Then, create duplicate styles under new combo classes like
.dark h1,.dark .button, etc. - This means when a parent element (such as
<body>) has the classdark, nested elements will show the dark version.
2. Add a Toggle Button
- Add a toggle switch (e.g., a simple icon, button, or checkbox) to your project.
- Give it a unique class like
dark-mode-toggle.
3. Use Webflow Interactions (Triggers)
- Go to the Interactions panel in the Designer.
- Select the toggle button and create a Mouse Click (Tap) interaction.
- On the first click:
- Use the Element Action → Add Class to add the
darkclass to the<body>(or main wrapper). - On the second click:
- Use the Element Action → Remove Class to remove the
darkclass.
4. Style Elements Based on the .dark Class
- Go through your key site elements (sections, text, navigation).
- While editing styles, select the parent body, add the
darkclass temporarily, and style nested elements accordingly under these selectors (e.g.,.dark .section,.dark .nav, etc.). - This way, when
darkis added to<body>, only the dark styles apply.
5. Optional – Save State with Custom Code
Webflow’s native functionality (in 2020) doesn't support storing user preferences. To persist dark mode:
- Add simple custom JavaScript (inside Project Settings → Custom Code or in an Embed):
- Use
localStorageto save the user’s mode and detect it on page load (e.g.,localStorage.setItem('mode', 'dark')). - On page load, check the item and add
darkclass accordingly.
Summary
To enable dark mode in Webflow in 2020, use a toggle interaction to add/remove a dark class on the body or wrapper element, then use combo classes or nested selectors to define dark styles. Optionally, use custom code to store the user’s preference.