How I added persistent dark mode in Webflow

Image for post

Webflow is an excellent tool for building static sites, blogs, and even a unique portfolio site. In this article, I’ll show you how to add the persistent dark mode inside your Webflow site. Let’s look at how to do this.

I used to build portfolios from scratch using React and other frameworks,

but I found it cumbersome to update and run them continually, so I moved to Webflow, which allows you to build websites in No Code.

It took me a while to get used to using it at first, but I’m now fascinated by it.

Lately, I’ve seen more and more portfolios that have added a dark mode.

Many of the sites that have added dark modes look much more aesthetic.

The purpose of adding a dark mode is to

Reduce eye strain
Improve battery life
It just has an aesthetic appeal.

To add a dark mode to my portfolio, I immediately started looking at sample projects on Webflow for best practices.

The one problem

However, with these methods, if you go to another page, the CSS will revert to the default style. For example, when the page gets loaded in light mode, and you switch to dark mode, it will return to light mode after you go to another page.

I quickly realized that there was a way to implement a persistent dark mode by using cookies to switch themes, and when I browsed through Forum, I also noticed that many designers were having the same problem. For their sake, I started working on implementing a persistent dark mode.

Step 1 — CSS in the header code

Define dark and light modes in CSS.

<style>
#content.light-mode {
  background-color: #ffffff;
  color: #171717;
}
#contant.light-mode a {
  color: #171717;
}
#content.light-mode path {
  fill: #F0F0F0;
}
#content.dark-mode {
  background-color: #171717;
  color: #ffffff;
}
#content.dark-mode a {
  color: #ffffff;
}
#content.dark-mode a.w--current {
 color: #707AFF;
}

#content.dark-mode path {
  fill: #2f2f2f;
}
</style>

Step 2 — Javascript in the Footer Code

You can set a persistent dark mode using document.cookies. The code is based on Dark-Light Mode Persistent Switcher by Ramblings of a Squirrel.

<script>
function setThemeFromCookie() {
 const themeState = document.getElementById('content');
 themeState.className = isThemeSelected() ? 'dark-mode' : 'light-mode';
}
function setThemeSwitchState() {
 document.getElementById('toggleTheme').checked = isThemeSelected();
}
function isThemeSelected() {
 return document.cookie.match(/theme=dark/i) != null;
}
function toggleTheme() {
 const themeState = document.getElementById('content');
 const currentState = themeState.className;
 const newState = themeState.className == 'dark-mode' ? 'light-mode' : 'dark-mode';
 themeState.className = newState;
 document.cookie = 'theme=' + newState;
}
(function() {
 setThemeFromCookie();
 setThemeSwitchState();
 document.getElementById('toggleTheme').onchange=toggleTheme;
})();
</script>

Step 3 — Add the toggle button for Theme switching

The toggle button uses a .

Webflow can only place a Checkbox in a Form tag. So I used Embed HTML to embed the Checkbox. I would suggest symbolizing the toggle button.

※You must add this tag to every page.

<label for="toggleTheme" title="Toggle theme">  
<input id="toggleTheme" name="theme" type="checkbox">  
  
</label>
<style>
<!--Insert your own style -->
</style>