How can you persist dark mode across multiple pages in Webflow?
To persist dark mode across multiple pages in Webflow, you can utilize Webflow's built-in Interactions feature and some custom code. Here's a step-by-step guide on how to achieve this:
Step 1: Setting up the Dark Mode Interaction
1. Create a new interaction in the Interactions panel.
2. Set the trigger for the interaction to "Page Load."
3. Add a new action to the interaction and choose "Affect Different Elements" as the action.
4. Select the elements on your page that need to transition to dark mode.
5. Set the initial state of the elements as the light mode design.
6. Define the final state of the elements with the dark mode design.
7. Customize any additional effects or transitions as needed.
Step 2: Adding a Dark Mode Toggle Button
1. Place a button element on your page that will serve as the dark mode toggle.
2. Style the button to your liking. You can use a moon or sun icon to represent dark and light mode.
3. Create a new interaction for the toggle button.
4. Set the trigger to "Click" and add a new action.
5. Choose "Affect Different Elements" as the action and select the elements that need to change according to the dark or light mode.
Step 3: Implementing Custom Code
1. Go to your page settings and add the following code to the Before </body> tag section:
```html
<script>
// Check if a dark mode preference exists in local storage
const prefersDarkMode = localStorage.getItem('dark-mode');
// If the user has previously set dark mode, apply it on page load
if (prefersDarkMode === 'true') {
document.querySelector('body').classList.add('dark-mode');
}
// Toggle dark mode function
const toggleDarkMode = () => {
const body = document.querySelector('body');
body.classList.toggle('dark-mode');
// Store the dark mode preference in local storage
localStorage.setItem('dark-mode', body.classList.contains('dark-mode'));
}
</script>
```
2. Add the following CSS code to your project's custom CSS section or within a <style> tag in the header:
```css
body {
/* Light mode styles */
}
body.dark-mode {
/* Dark mode styles */
}
```
Step 4: Applying Dark Mode to Other Pages
To ensure dark mode persists across multiple pages, follow these additional steps:
1. In Webflow, go to the Page Settings of each page and add the following code to the Before </body> tag section:
```html
<script>
// Check if a dark mode preference exists in local storage
const prefersDarkMode = localStorage.getItem('dark-mode');
// If the user has previously set dark mode to true, apply dark mode on page load
if (prefersDarkMode === 'true') {
document.querySelector('body').classList.add('dark-mode');
}
</script>
```
That's it! Dark mode should now persist across your Webflow project's pages. The state (light or dark) will be saved in the user's local storage, allowing them to enjoy a consistent dark mode experience throughout their navigation.