DEV Community

loading...
Cover image for Toggle Dark Mode in React

Toggle Dark Mode in React

abbeyperini profile image Abbey Perini ・5 min read

When I rebuilt my portfolio site, I knew I wanted to have some fun with the design, and a dark and light mode fit the bill. I enjoyed a lot of the discoveries I made during this project, but my favorite has to be the color changing SVGs. This tutorial assumes familiarity with React, and I am using v17.0.1 and functional components.

First, I created a base layout. Next, I put together my dark and light color schemes. It took a little trial and error, but after testing all my combinations for sufficient contrast and experimenting with placement, I found I needed 6 CSS variables. I guess you could say I used “dark first” development, because the variable names make sense in the context of the dark theme. The light theme has less variation, but needed --button-border where --accent would be the same color as the background.

.theme-dark {
  --dark-text: #292929;
  --light-text: #F9F8F8;  
  --dark-background: #2F4550;
  --light-background: #586F7C;
  --accent: #B8DBD9;
  --button-border: #B8DBD9;
}
Enter fullscreen mode Exit fullscreen mode
.theme-light {
  --dark-text: #5E4B56;
  --light-text: #5E4B56;
  --dark-background: #DBE7E4;
  --light-background: #EDDCD2;
  --accent: #DBE7E4;
  --button-border: #5E4B56;
}
Enter fullscreen mode Exit fullscreen mode

Then, I set about applying colors to my base layout:

html, #root {
  background-color: var(--dark-background);
  color: var(--dark-text);
}

nav {
  background-color: var(--dark-background);
  color: var(--light-text);
}

.main-container {
  background-color: var(--light-background);
}
Enter fullscreen mode Exit fullscreen mode

I also set the backgrounds of the sections of content that I wanted to pop to --accent. --dark-text would have worked on all backgrounds in the dark theme, but I set the section titles to --light-text to make them stand out more.

I found Musthaq Ahamad‘s basic theme switcher tutorial, and set about applying it to functional React components.
I put functions for changing the theme and checking localStorage for theme preferences into a file called themes.js.

function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
}

function keepTheme() {
  if (localStorage.getItem('theme')) {
    if (localStorage.getItem('theme') === 'theme-dark') {
      setTheme('theme-dark');
    } else if (localStorage.getItem('theme') === 'theme-light') {
      setTheme('theme-light')
    }
  } else {
    setTheme('theme-dark')
  }
}

module.exports = {
  setTheme,
  keepTheme
}
Enter fullscreen mode Exit fullscreen mode

In my App.js file, I added keepTheme() to my useEffect().

import { keepTheme } from './utils/themes';

function App() {
  useEffect(() => {
      keepTheme();
  })
}
Enter fullscreen mode Exit fullscreen mode

Next, I added the toggle component to my navigation bar component. I styled the toggle following Chris Bongers’ Tutorial based on Katia De Juan’s Dribbble. Then I adjusted the size and flipped it to default to dark mode. While this toggle is so cute that you could die, this tutorial will work with any <button> or clickable <input>. First, I set up the basic JSX, the local state, and a variable to hold the theme we get from localStorage:

import React, { useEffect, useState } from 'react';
import '../styles/toggle.css';
import { setTheme } from '../utils/themes';

function Toggle() {
  const [togClass, setTogClass] = useState('dark');
  let theme = localStorage.getItem('theme');
  return (
        <div className="container--toggle">
           <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} />
            <label htmlFor="toggle" className="toggle--label">
                <span className="toggle--label-background"></span>
            </label>
        </div>
    )
}

export default Toggle;
Enter fullscreen mode Exit fullscreen mode

When a user clicks the toggle, I want the theme on the page to change and the toggle to change with it. I added the imported setTheme() function and setTogClass() from the local state to a handleOnClick function. You can see where it is passed to the clickable part of the toggle in the JSX above.

const handleOnClick = () => {
  if (localStorage.getItem('theme') === 'theme-dark') {
      setTheme('theme-light');
      setTogClass('light')
  } else {
      setTheme('theme-dark');
      setTogClass('dark')
  }
}
Enter fullscreen mode Exit fullscreen mode

I used this component’s useEffect() to make sure the local state togClass always loads with the correct theme.

useEffect(() => {
    if (localStorage.getItem('theme') === 'theme-dark') {
        setTogClass('dark')
    } else if (localStorage.getItem('theme') === 'theme-light') {
        setTogClass('light')
    }
}, [theme])
Enter fullscreen mode Exit fullscreen mode

Because my toggle is a checkbox, the dark theme should show the unchecked (moon) state and the light theme should show the checked (sun) state. I couldn’t get defaultChecked to work how I wanted, so I replaced the unchecked <input> with this conditional rendering ternary operator (conditional operator):

{
    togClass === "light" ?
    <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} checked />
    :
    <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} />
}
Enter fullscreen mode Exit fullscreen mode

If you used a <button>, you could easily use conditional rendering like this to change the className attribute within the <button> tag and get the same effect.

Put all together, the code for the toggle component looks like this:

import React, { useEffect, useState } from 'react';
import '../styles/toggle.css';
import { setTheme } from '../utils/themes';

function Toggle() {
    const [togClass, setTogClass] = useState('dark');
    let theme = localStorage.getItem('theme');

    const handleOnClick = () => {
        if (localStorage.getItem('theme') === 'theme-dark') {
            setTheme('theme-light');
            setTogClass('light')
        } else {
            setTheme('theme-dark');
            setTogClass('dark')
        }
    }

    useEffect(() => {
        if (localStorage.getItem('theme') === 'theme-dark') {
            setTogClass('dark')
        } else if (localStorage.getItem('theme') === 'theme-light') {
            setTogClass('light')
        }
    }, [theme])

    return (
        <div className="container--toggle">
            {
                togClass === "light" ?
                <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} checked />
                :
                <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} />
            }
            <label htmlFor="toggle" className="toggle--label">
                <span className="toggle--label-background"></span>
            </label>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

Finally, my favorite part: the color switching SVGs! CSS variables work in SVG code too!

I got my SVG code for the Github and Chrome icons from DEVICON. For the Github icon all I had to change was one fill attribute in a <g>:

<g fill="var(--dark-text)">
Enter fullscreen mode Exit fullscreen mode

The Chrome icon had a fill attribute in a <circle> and a <path>:

<circle fill="var(--dark-text)" cx="63.624" cy="64.474" r="22.634"></circle><path fill="var(--dark-text)" ...>
Enter fullscreen mode Exit fullscreen mode

The result looks like this:
clicking on a toggle styled to look like a moon with stars changes the colors of the site from dark mode to light mode and the toggle now looks like a sun with clouds - desktop view
clicking on a toggle styled to look like a moon with stars changes the colors of the site from dark mode to light mode and the toggle now looks like a sun with clouds - mobile view

Conclusion

I tried to include all of the relevant code, but you can also see the full code for my site in its Github repository. If you enjoyed this article or are left with questions, please leave a comment below! I would also love to see anything built following this tutorial.

Discussion (16)

pic
Editor guide
Collapse
kirkcodes profile image
Kirk Shillingford

I will 100% be referencing this article multiple times. Thank you for putting this together.

Collapse
urielbitton profile image
Uriel Bitton

nice, comprehensive, and well written article!

Collapse
abbeyperini profile image
Collapse
mangrove108 profile image
Mangrove108

thanks for sharing

Collapse
lindiwe09 profile image
Lindie

Nice and well-written article but any idea on how l can implement that using Tailwind CSS

Collapse
abbeyperini profile image
Abbey Perini Author

No, but if I figure it out on the upcoming project I'm going to learn Tailwind for, I'll let you know.

Collapse
lindiwe09 profile image
Lindie

Alrighty

Collapse
viragdesai profile image
Virag Dilip Desai

Very well written and explained. Thank you!

Collapse
abbeyperini profile image
Abbey Perini Author

Thanks for reading!

Collapse
ruppysuppy profile image
Tapajyoti Bose

Great job! Really liked the animation & stars and the cloud

Collapse
mnunezdm profile image
Miguel Núñez Díaz-Montes

Why are you doing this?

localStorage.getItem('theme') && localStorage.getItem('theme') === 'theme-dark'

And not directly this?

localStorage.getItem('theme') === 'theme-dark'

Collapse
abbeyperini profile image
Abbey Perini Author

"if (localStorage.getItem('theme') && localStorage.getItem('theme') === 'theme-dark')" in keepTheme() is checking if a theme is stored in localStorage before comparing it to a string. It's in the main container's useEffect() and was throwing an error if it didn't exist when written like you suggest. The handleOnClick() in the Toggle component is written the way you suggest because there's always something in localStorage by the time it gets used.

Collapse
abbeyperini profile image
Abbey Perini Author • Edited

Now it occurs to me I could totally refactor it to

if (localStorage.getItem('theme')) {if (localStorage.getItem('theme') === 'theme-dark') {setTheme('theme-dark'); } else if (localStorage.getItem('theme') === 'theme-light') {setTheme('theme-light')

} else {
setTheme('theme-dark')
}
}

ETA: the site and blog have been updated with this refactor

Collapse
mangrove108 profile image
Mangrove108

how about a redux version ? 😊

Collapse
abbeyperini profile image
Abbey Perini Author

Hmm. I chose not to use Redux for this project.

The only time I used local state was to get the toggle to load with the correct side. You could put that in global state, but I don't see an advantage to that - especially since you could probably get that to work with just JS. 🤔

Collapse
mangrove108 profile image
Mangrove108 • Edited

Had some issues with conditionals in a component with your solution, so i decided to make it a bit more robust. Your post was very helpful.