Enhance user experience with a theme-adaptive website that leverages system applied settings with a manual override option.

I recently updated my personal portfolio site from an old, static, javascript version to a much more robust React version. I should start by saying that I am not a developer by any means. I am a design director by trade, but have taught myself enough code over the years to be able to get stuff done. That said, I’ll share my journey to help users navigate my site using their preferred color theme option.

Goals of the project.

First, allow the user to navigate the site without ever needing to touch the theme switcher. Just inherit their preferred system setting and they would likely never even need to change the theme.
Additionally, they should also be able to manually toggle the theme if they want to.
Finally, ensuring they can revert back to the default system setting, if they don’t want to worry about toggling anymore.

Technology utilized.

For my project, I limited the theme options to just light and dark, following the system options available to most modern devices. But you could really make any type of theme you like and any number of them. There are a few key things that helped make this possible:

Media queries:
Basically media queries just check that the device contains certain parameters so you can target only the devices with that configuration. You can use either CSS or JavaScript to obtain these values, and while there are many different types of media queries, there is one more specifically that I targeted for this feature. It is known as “prefers-color-scheme: dark”.
CSS:
Essentially, this is the look and feel of the themes you’re implementing. Allowing you to make each theme look the way you want.
JavaScript:
Where the magic actually happens. This is how I target the “prefers-color-scheme: dark” value, write the html, and manage state.
localStroage:
A simple way to store data locally so that your site can remember certain things while the user navigates around, and even when the user leaves and comes back.

Creating the themes.

In the past, I had done this by just adjusting to the users system preference without a toggle, and would simply use the css media query to change the theme as shown below:

@media (prefers-color-scheme: dark) { /* Your CSS goes here */ }

Since I wanted the user to be able to toggle as well, I had to move away from just the user setting check. To do this, I simply just created a class, which I called “.dark”. Thankfully, CSS supports variables which makes it fairly easy to adapt to a new theme, with minimal code. Essentially, you just need to set your base root variables and then utilize them in your CSS targets, and finally, change the variables for each theme you want to create.

Ideally, everything that needs to change should become a variable, that way it’s easy to maintain and manage, which is especially useful if you want to add even more theme options.

Here is the CSS code I used for setting the foundation for both theme options using just variables. As you can see, it is quite simple to manage and adapt.

/* Base variables used for CSS targets */ 

:root {  

  --grayscale0:             #FFFFFF; 
  --grayscale10:            #F9F9F9; 
  --grayscale20:            #E3E3E3; 
  --grayscale30:            #CCCDCD; 
  --grayscale40:            #B6B6B7; 
  --grayscale50:            #8A8A8B; 
  --grayscale60:            #5D5E5F; 
  --grayscale70:            #474749; 
  --grayscale80:            #303133; 
  --grayscale90:            #1A1B1D; 
  --grayscale100:           #121314; 

  --blue:                   #276EF1; 
  --purple:                 #7356BF; 
  --orange:                 #FF7D49; 
  --brown:                  #99644C; 
  --red:                    #F25138; 
  --green:                  #47B275; 
  --yellow:                 #FFC043; 

  --accent:                 #B99470; 
  --accent-bg:              rgba(185,148,112,0.1); 
  --accent-bg2:             rgba(185,148,112,0.2); 

  --invert:                 invert(1); 
  --invert-reverse:         invert(0); 

  --glass-bg:               rgba(249,249,249, 0.9); 

  --box-shadow:             0 26px 58px 0 rgba(0, 0, 0, 0.22), 0 5px 14px 0 rgba(0, 0, 0, 0.18); 
  --box-shadow-reverse:     0 26px 58px 0 rgba(0, 0, 0, 0.22), 0 5px 14px 0 rgba(0, 0, 0, 0.18); 

  --overlay-bg:             linear-gradient(180deg,rgba(249,249,249,0),rgba(249,249,249,1)); 
  --overlay-bg2:            linear-gradient(0deg, rgba(249, 249, 249, 0) 50%, rgba(249, 249, 249, 0) 60%, rgba(249, 249, 249, 1) 92%); 
  --project-nav-bg:         linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.8) 40%,   rgba(255, 255, 255, 1) 50%); 
} 

/* Change the required variables for dark theme */ 

.dark { 

  --grayscale0:             #121314; 
  --grayscale10:            #1A1B1D; 
  --grayscale20:            #303133; 
  --grayscale30:            #474749; 
  --grayscale40:            #5D5E5F; 
  --grayscale50:            #8A8A8B; 
  --grayscale60:            #B6B6B7; 
  --grayscale70:            #CCCDCD; 
  --grayscale80:            #E3E3E3; 
  --grayscale90:            #F9F9F9; 
  --grayscale100:           #FFFFFF; 

  --accent:                 #B7AB98; 
  --accent-bg:              rgba(183,171,152,0.15); 
  --accent-bg2:             rgba(183,171,152,0.20); 

  --invert:                 invert(0); 
  --invert-reverse:         invert(1); 

  --glass-bg:               rgba(26,27,29, 0.9); 

  --box-shadow-reverse:     0 26px 58px 0 rgba(255, 255, 255, 0.70), 0 5px 14px 0 rgba(255, 255, 255, 0.40); 

  --overlay-bg:             linear-gradient(180deg,rgba(26,27,29,0), rgba(26,27,29,1)); 
  --overlay-bg2:            linear-gradient(0deg, rgba(26, 27, 29, 0) 50%, rgba(26, 27, 29, 0) 60%, rgba(26, 27, 29, 1) 92%); 
  --project-nav-bg:         linear-gradient(180deg, rgba(18, 19, 20, 0) 25%, rgba(18, 19, 20, 0.8) 40%,   rgba(18, 19, 20, 1) 50%); 
}

Creating the toggle.

For the toggle I created a reusable component that I called into my core App.js file. I decided to utilize a tri-state switch that would cycle through System, Light, and Dark modes.

By default the state is set to System and will inherit the users device preference for theme. If the user toggles the control, state will change to the Light theme and save this preference to localStorage. If they toggle it again, it will set the theme to dark, saving the new preference to localStorage, and if they toggle once more it will cycle back to the system setting, updating localStorage along the way.

Here is my code for the control I decided to build.

import React from ‘react’; 

// These are a couple of the icons used. Three icons total, 
// but one of the icons I loaded was from Material symbols. 

import { MdLightMode } from "react-icons/md"; 
import { MdDarkMode } from "react-icons/md"; 

const ThemeSwitch = ({onChange}) => { 

  // These two items get information needed to make the feature work  
  // correctly. The media query checks for users that prefer dark mode, and 
  // the ‘theme’ value from localStorage lets us know if the user has saved a 
  // preference or not 

  const prefersDark = window.matchMedia(‘(prefers-color-scheme: dark)’); 
  const savedTheme = localStorage.getItem(‘theme’); 

  // These variables help us maintain state of the above values and 
  // update when things change. 

  const [theme, setTheme] = React.useState(savedTheme); 
  const [dark, setDark] = React.useState(prefersDark.matches); 

  // This functions is ran in useLayoutEffect on page load and sets the 
  // initial UI state it is ultimately looking at the user preferences 
  // captured above and adds a class name to the top level html container. 

  function initTheme() { 

    const div = document.getElementById(‘theme’); 

    if (savedTheme === "1") { 
      setTheme(1); 
      div.className = "App"; 
    } 
    else if (savedTheme === "2"){ 
      setTheme(2); 
      div.className = "App dark"; 
    } 
    else if (savedTheme === null || savedTheme === "0") { 
      setTheme(0); 
        if (dark) { 
          div.className = "App dark"; 
        } 
        else { 
          div.className = "App"; 
        } 
     } 
  } 

  // This tracks the users click on the theme toggle and sets state 
  // appropriately 

  const handleClick = () => { 

    // The newTheme variable will count up on each click and restart to 0 when 
    // it hits number 3, allowing to cycle through all options continously 

    const newTheme = (theme + 1) % 3; 
    setTheme(newTheme); 
    onChange && onChange(newTheme); 

    const div = document.getElementById(‘theme’); 

    // Save the theme to localStorage 

    localStorage.setItem(‘theme’, newTheme); 

    // Set the theme approriately. 

    if (newTheme === 2) { 
      div.className = "App dark"; 
    } 
    else { 
      div.className = "App"; 
    } 
  }; 

  React.useLayoutEffect(() => { 
    // Runs the function above to set the initial state for the theme 

    initTheme(); 

    // Listens for changes to the prefersDark media query and as long as the 
    // theme preference is not specifically set to light or dark the UI will 
    // change as needed. 

    prefersDark.addEventListener(‘change’, (event) => { 

      setDark(event.matches); 
      const div = document.getElementById(‘theme’); 

       if (theme === 2 || (event.matches && (savedTheme === null || savedTheme === "0"))) { 
         div.className = "App dark"; 
       } 
       else { 
         div.className = "App"; 
       } 
    }); 
  }, [dark, theme, savedTheme]); 

  return ( 
    // Finally the tri-state toggle for cycling through System, Light, and  
    // Dark themes. 

    <span onClick={handleClick} className="theme-toggle"> 
      <span className="theme-name">{theme === 1 ? "Light Theme" : (theme === 2 ? "Dark Theme" : "System Theme")}</span> 
      {theme === 1 ? <MdLightMode /> : (theme === 2 ? <MdDarkMode /> : <span className="material-symbols-rounded">routine</span>)} 
    </span> 
  ); 
}; 

export default ThemeSwitch;

You can check out the toggle in action at: joshsroufe.com.

In the end, this was a good solution for my needs. However, depending on your needs and desires, the control component you use may need to be a button group, or drop-down menu, or some other option that better suites your use case, but this should help you get started.

Website themes with user preferences in mind was originally published in Design Tension on Medium, where people are continuing the conversation by highlighting and responding to this story.