Light and Dark Mode in a React App With localStorage

by | Sep 17, 2021 | React | 0 comments

In this article, you will learn how to create a light theme and Dark theme Mode in a React App With localStorage.

First, I started a simple layout using react js and I’ve modified the react app component. There is a create some components and connect to the navbar, adding image div, some text paragraphs, footer page and create a new components name is DarkMode.js. On this page inside, we will call DarkMode.css and little JavaScript code, custom CSS code.

What Is Dark Mode?

The dark mode is the web color scheme that displays dark surfaces. The dark mode look is beautiful that mode helps to reduces eye strain when you’re working on a laptop, tab, or mobile phone for a long time. Most of the websites companies, including YouTube, Netflix, and Twitter, have implemented the dark mode on all platforms.

SETTING UP

Let’s build a new create-react-app project. From the terminal, run the following command:

npx create-react-app dark-mode
cd dark-mode
npm start

 Sticky.js 

import React,{useState,useEffect} from 'react';
import './theme.css';
import { FcNightLandscape,FcLandscape } from "react-icons/fc";

const Sticky = () => {
  const [darkMode, setDarkMode] = useState(false);
  const ActiveMode = async () => {
    setDarkMode(!darkMode);
    if(darkMode === true){ 
      document.body.classList.add('light__mode');
      document.body.classList.remove('dark__mode');
      await localStorage.setItem('Theme','light__mode'); 
    }
    if(darkMode === false){ 
      document.body.classList.add('dark__mode');
      document.body.classList.remove('light__mode');
      await localStorage.setItem('Theme','dark__mode'); 
    }

  };
  
  useEffect(() => {
    if (localStorage.getItem('Theme') === 'light__mode') {
      document.body.classList.add('light__mode');

    } else if (localStorage.getItem('Theme') === 'dark__mode') {
      document.body.classList.add('dark__mode');
      setDarkMode(!darkMode);
    }

  }, []);
  

  return ( <>
   <div className="so__sticky " >
    <div className="switch-checkbox">
    {localStorage.getItem('Theme') === 'dark__mode' ?
      <FcNightLandscape onClick={ActiveMode} />
      :
      <FcLandscape onClick={ActiveMode} />
    }

    </div>
   </div>
       
             
  </> )
}

export default Sticky

Conclusion

In this article, you will learned Light and Dark Mode in a React App With localStorage Tutorial is over. The supporting Github repository is available for this post. Also, check it out on youtube.

Download source code from github   |   Live Demo – youtube