Image for post

persistent-dark-mode — Webflow

Persistent dark mode for your site, Webflow ready. You will need to upgrade your site plan to use custom codes in…

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

  1. Reduce eye strain
  2. Improve battery life
  3. 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.

CSS Color Scheme: prefers (dark)

To see this page in dark mode automatically, do the following. Testing this out is easy. Copy/paste the code below into…

Night mode

I do a lot of reading on my laptop & tablet. The ability to change the background-color and font-color on demand keeps…

Dark Mode Switch

Edit description

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.

#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;

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.

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() {

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">  
<!--Insert your own style -->

Step 4 — Specify the ID

Specify an optional ID for the parent Div block and a light mode for its class. You need to do this page-by-page.

Image for post

Specify an optional ID for the parent Div Block

Image for post

#dark-mode #webflow-design #webflow #web #no-code

How I added persistent dark mode in Webflow
15.55 GEEK