theme toggle • create.david.qa

Dark / light mode toggle

Get a theme toggle for your website, like the one on this site.

If you want something incredibly simple, you can check out this W3 Schools page.

However, there are a few problems with this method. It's not comprehensive, won't remember your selection if you navigate to another page or refresh, and also doesn't take the user's dark/light mode system preferences into account.

So we want to create a theme toggle that:

Is site-wide
Defaults to the user's specified preference
Remember's the user's selection and persists throughout their session

So I created something that did that. For an example, you can click the button below to see a preview:

Toggle Button HTML (place wherever you want on your site):

<!-- Dark/Light Theme Toggle Button -->
<div class="theme-switcher">
  <img src="https://create.david.qa/images/light.gif" alt="Theme toggle" id="theme-toggle"> 
</div>

What's happening here?

You're adding a button to your website users can click to toggle the dark/light theme styles we'll be defining with CSS soon. You can use any image you like, or you can use the two images below with their current names, light.gif and dark.gif.

Save these images to your images folder:

If you choose to use your own images, remember to replace https://create.david.qa/images/light.gif with the URL location of your version.

Toggle Button CSS (add to your stylesheet file):

/*  Light/Dark theme toggle
  ------------------------------ */

/* Toggle button and icon */

.theme-switcher {
/* Change this to position: absolute; if you want to keep it at the top */
position: fixed;
top: 10px;
right: 10px;
    }

#theme-toggle {
cursor: pointer;
    }

.dark-mode #theme-toggle {
content: url('https://create.david.qa/images/dark.gif'); 
    }

What's happening here?

You're positioning the button to go in the top right corner of your page and giving it the class we'll use to swap its image when clicked.

Remember to replace https://create.david.qa/images/dark.gif with the URL location of your versions of the images!

Dark Theme Styles CSS (add to your stylesheet file):

  /* Dark theme styles */


.dark-mode {
background-color: #1e1f22;
color: #fff;
    }

.dark-mode #header {
background-color: #313338;
background-image: var(--header-image-dark);
}

.dark-mode aside {
    background-color: #2b2d31;
    color: #fff;
}

.dark-mode main {
    background-color: #313338;
    color: #fff;
}

.dark-mode .box {
    background-color: #fff;
    color: #000;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3 {
    color: #fff;
}

.dark-mode strong {
    color: #dadada;
}

What's happening here?

Here you're defining your dark mode styles, assuming your current theme is light by default.

This may not line up with your theme 1:1, so a good rule of thumb is to identify elements, classes, and ids that may have a color set, and then create a .dark-mode variant of it and change the color or background-color value to something else.

Toggle function JavaScript (create or add to a .js file):

// Dark/Light Mode Theme Toggle from create.david.qa 
  document.addEventListener('DOMContentLoaded', function() {
      // Get system preference
      const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
      const systemPrefersDark = darkModeMediaQuery.matches;
      console.log(`System prefers dark: ${systemPrefersDark}`);
  
      // Get stored preference
      const storedPref = sessionStorage.getItem('theme');
      console.log(`Stored preference: ${storedPref}`);
  
      // Default to system pref
      let currentTheme = systemPrefersDark ? 'dark' : 'light';
  
      // If stored pref, use that
      if (storedPref) {
          currentTheme = storedPref;
      }
      console.log(`Current theme: ${currentTheme}`);
  
      // Toggle button
      const toggle = document.getElementById('theme-toggle');
  
      function setTheme() {
          const isDark = currentTheme === 'dark';
  
          if (isDark) {
              document.body.classList.add('dark-mode');
          } else {
              document.body.classList.remove('dark-mode');
          }
  
          // Update image
          const imgSrc = isDark ? 'https://create.david.qa/images/dark.gif' : 'https://create.david.qa/images/light.gif';
          console.log(`Image source: ${imgSrc}`);
          toggle.src = imgSrc;
      }
  
      // Set initial theme
      setTheme();
  
      // Listen for system pref changes
      darkModeMediaQuery.addEventListener('change', e => {
          if (!storedPref) {
              // If no stored pref, follow system pref
              currentTheme = e.matches ? 'dark' : 'light'; 
              setTheme();
          } 
      });
  
      toggle.addEventListener('click', () => {
          // Switch theme
          currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
          // Store preference
          sessionStorage.setItem('theme', currentTheme);
  
          // Set theme
          setTheme();
      });
  });

What's happening here?

Lots! First, this checks the user's system preference for dark or light theme (if any), stores that preference, and then displays it first. This only gets overridden if the user clicks the toggle, which then persists throughout the session across whatever other pages have this JavaScript running. Each time a page is loaded, it will check the storage if there's an existing preference set, and then display that version.

Remember to replace https://create.david.qa/images/dark.gif and https://create.david.qa/images/light.gif with the URL location of your versions of the images!

This JS will even store a log of which theme you're in, so you can view it in your browser's developer tools (under the "Console" tab).

As a bonus, you can add <meta name="darkreader-lock"> to the head of your page to disable the Dark Reader extension.

If you end up using this theme toggle, credit is appreciated (but not required)!

Changelog

2023.07.30: Greatly simplified, provided example site.
2023.07.28: Initial submission. Want to do more testing.