Persistent Dark Mode for WebFlow

How to add Dark Mode feature in Webflow?

Introducing an innovative game-changing script that will revolutionize the way you design your website. Say goodbye to the hassle of animating each page just to realize that your website's mode doesn't persist across different pages. With our cutting-edge Dark Mode tool, developed by Neue World, you can seamlessly transition between light and dark mode with just one click. Plus, our tool remembers your preference for the next time you visit the site, making it easy to personalize your browsing experience. Stay tuned for the next part of this blog to learn how to integrate this revolutionary script into your website.

‍

_{Step #1}

Copy the Copy to Clipboard <script>

Integrating our Dark Mode tool into your website is a breeze! Follow these easy steps to get started:

1. Click on "Pages" in the left navigation or press "P" on your keyboard
2. Select the settings icon beside the page you want to add the script to
3. Scroll down to the "Before </body> tag" section
4. Simply copy the script we've provided and paste it here

That's it!

‍

‍

_{Step #2}

Set Element ID

‍

To ensure the smooth functioning of our Dark Mode tool, it is essential to add an ID, specifically 'toggleButton,' to the button or element that will trigger the mode switch. We recommend creating a button with icons that represent light and dark mode, such as a sun and a moon, respectively. Adding a WebFlow animation will further enhance the user experience. Once you have created the button, don't forget to add the 'toggleButton' ID to ensure that the script can identify the trigger and switch the colors seamlessly.

‍

PRO TIP: Use WebFlow Animationst work

‍

_{Step #3}

Publish your site

It's highly recommended to publish your site on staging environment to ensure the scrip. Once you have confirmed it, you can publish it to your primary domain.

‍

NOTE: Since every site might have different element classes and color codes, we have set up this mode change to affect all the elements that take their styles from the "body". The mode changes the background color of your website to black (#000000) and the text color to white (#FFFFFF). When you toggle back, the website goes back to the original styles.