How to add a Dark Mode Toggle to your Website

In today’s tutorial, we are going to show you how to create a toggle switch to change your website from ‘light’ mode to ‘dark’ mode.

In recent times, more and more devices start to support dark mode. With that in mind, we will have to create our website with dark mode capability support in mind.

There are many ways to achieve this but with our method, we are going to be using the :root CSS pseudo-class which matches the root element of a tree representing the document. In HTML, :root represents the <HTML> element and is identical to the selector html, except that its specificity is higher.

If you just want to skip to the CodePen, then click here, otherwise, let’s commence!

Let’s go!

Let’s say we have the following markup, we are going to add the color-switch above the navigation menu which will be our toggle for the mode switch:

HTML CODE


<div class="container">
  <div class="color-switch">
    <div class="switch"></div>
  </div>
  <div class="navigation">
    <ul>
      <a href="https://silvawebdesigns.com/" class="active" target="_blank" rel="noopener noreferrer">Home</a>
      <a href="https://silvawebdesigns.com/#about">About</a>
      <a href="https://www.instagram.com/silvawebdesigns/" target="_blank" rel="noopener noreferrer">Instagram</a>
      <a href="https://twitter.com/SilvaWebDesigns" target="_blank" rel="noopener noreferrer">Twitter</a>
    </ul>
  </div>
</div>

CSS CODE


@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap');

 :root {
	 --background: #FFF;
	 --text: #000;
	 --highlight: #ff6564;
}
 body {
	 background: var(--background);
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 height: 100vh;
	 overflow: hidden;
	 transition: 0.5s background ease;
}
 .container {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 flex-direction: column;
}
 .color-switch {
	 --background: #fff;
	 --text: #000;
	 color: var(--text);
	 width: 70px;
	 height: 30px;
	 background: var(--highlight);
	 border-radius: 50px;
	 position: relative;
   cursor: pointer;
}
 .color-switch .switch {
	 background: white;
	 width: 24px;
	 height: 24px;
	 background: var(--background);
	 border-radius: 100%;
	 position: absolute;
	 top: 3px;
	 left: 4px;
	 transition: 0.5s all ease;
}
 .dark-theme {
	 --background: #000;
	 --text: #FFF;
   --highlight: #ff6564;
	 background: var(--background);
}
 .dark-theme .color-switch {
	 background: var(--highlight);
}
 .dark-theme .color-switch .switch {
	 transform: translateX(37px);
}
 .dark-theme a {
	 color: var(--text);
}
 .navigation {
	 display: flex;
	 justify-content: center;
}
 ul {
	 display: flex;
	 list-style-type: none;
}
 ul a {
	 margin: 10px 30px;
	 position: relative;
	 color: var(--text);
	 font-family: 'Montserrat', sans-serif;
	 font-size: 20px;
	 text-transform: uppercase;
	 text-decoration: none;
}
 ul a:before {
	 position: absolute;
	 bottom: -2px;
	 content: '';
	 width: 100%;
	 height: 3px;
	 background: var(--highlight);
	 transform: translateX(-100%);
	 opacity: 0;
}
 ul a:hover:before {
	 opacity: 1;
	 transition: 0.5s transform ease, 0.8s opacity ease;
	 transform: translateX(0);
}
 ul .active {
	 color: var(--highlight);
}
 ul .active:hover:before {
	 opacity: 0;
}

With the CSS code above, you will notice that we have defined three variables within :root which is our light theme. We have then defined the colours in which we want to use for the dark version using the class .dark-theme. Within here, we are just simply replacing the background and text colour. There will be a lot more cases in which you need to change colours, but this is a simple example to get you started with the setup.

jQuery Code


$(".color-switch").on("click", () => {
  $("body").toggleClass("dark-theme");
});

This simple snippet of jQuery is simply adding the toggling the class dark-theme on click. On page load, body will not contain the class dark-theme, on click of our color-switch class, dark-theme will be added as a body class and will add the light theme styles to your website. On secondary click, it will simply revert back to the initial state.

This example we have provided today is just a start on how you could achieve a dark mode and light mode version of your website, however, there are other design considerations you need to take into place.

Design Considerations

Okay, so we already know the basic tasks of switching between light and dark mode. However, there are some UI elements and enhancements that do require more attention, lets dig into those.

Dark Mode Images

In general, a good rule of thumb is to decrease the brightness/contrast of images whilst in ‘dark mode’ so it looks comfortable to the eyes. An extremely bright image on a dark background can give a negative impact so dimming the image reduces the heavy contrast.

The CSS filter() function is more than capable of handling this type of situation as follows:


body.dark-theme img {
  filter: brightness(.8) contrast(1.2);
}

The list goes between the variations between ‘dark mode’ and ‘light mode’, these will include items such as:

Dark Mode Typography
Dark Mode Icons
Dark Mode Colours
Dark Mode Colour Palettes

and so on… it’s all about finding the right balance as to what is pleasing on the eye for both versions.

So, should I add Dark Mode to my website?

There are many perfectly valid reasons for either side and really, it’s up to you!

Here are reasons why you might want to implement ‘dark mode’:

It’s pretty cool and trendy (though this isn’t really a valid reason on its own!)
It enhances accessibility by supporting users who are sensitive to eye strain (yes, valid reason!)
It gives website visitors the decision to decide which version of your site is most comfortable for them to use
It helps to preserve battery life for devices with OLED screen where brighter colours consume more energy.
It’s becoming normality to have this on modern websites. It’s possible that your users who prefer a dark mode will expect your site to have one, so we might as well be ready for it then right?

As you may have noticed, we haven’t yet added this feature to our website, well, it’s pretty dark anyway but we could potentially change this in the future. As we’ve mentioned, we’ll simply be replacing white backgrounds with darker variants, changing the image brightness and contrast across the site then just going through page by page to see what other changes we can make to make it more pleasing to the eyes of ‘dark mode’ users. What needs to be done depends on the contents of your site, but with everything we have gone through on today’s tutorial, we’re sure you’ll be making awesome ‘dark mode’ versions of your website in no time!

WordPress / Web Development Tutorials
(Best WordPress Tutorials)