Breaking News: Grepper is joining You.com. Read the official announcement!

react implementing dark and light mode using tailwindcss

Shirshak Kandel answered on December 7, 2022 Popularity 10/10 Helpfulness 5/10

answer react implementing dark and light mode using tailwindcss

react implementing dark and light mode using tailwindcss

Comment

//tailwind.config.js
//enable darkMode with class 
module.exports = {
  darkMode: 'class',
}
//Hero.js
const Hero = ()=> {
  // theme state
  const [theme, setTheme] = useState('light');

  // if local storage is empty save theme as light
  useEffect(() => {
    if (localStorage.getItem('theme') === null) {
      localStorage.setItem('theme', 'light');
    }
  }, []);

  useEffect(() => {
    // select html elem
    const html = document.querySelector('html');
    //add or remove class dark in html elem according to theme in localstorage.
    if (localStorage.getItem('theme') === 'dark') {
      html.classList.add('dark');
      setTheme('dark');
    } else {
      html.classList.remove('dark');
      setTheme('light');
    }
  }, [theme]);

  // handle switch theme
  const handleThemeSwitch = () => {
    if (localStorage.getItem('theme') === 'light') {
      setTheme('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      setTheme('light');
      localStorage.setItem('theme', 'light');
    }
  };
  
  return (
   <section className="min-h-[740px] w-full bg-heroLight bg-cover bg-center bg-no-repeat overflow-hidden dark:bg-heroDark">
   // we use dark: tailwind to to make website change when dark class is added
   // in html
    </section>
  )
}

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: github.com

Tags: javascript light mode tailwind-css using

Link to this answer
Share Copy Link

Contributed on Dec 07 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

react implementing dark and light mode using tailwindcss

Contents

More Related Answers

react implementing dark and light mode using tailwindcss

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.