how to implement dark/light theme with local storage in react

Designer Borhan answered on June 17, 2023 Popularity 5/10 Helpfulness 6/10

answer how to implement dark/light theme with local storage in react

how to implement dark/light theme with local storage in react

Comment

import React, { useState, useEffect } from 'react';
import './darkMode.css';
function App() {
  const [theme, setTheme] = useState(
    localStorage.getItem('theme') || 'light'
  );
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };
  useEffect(() => {
    localStorage.setItem('theme', theme);
    document.body.className = theme;
  }, [theme]);
  return (
    <div className={`App ${theme}`}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <h1>Hello, world!</h1>
    </div>
  );
}
export default App;

Popularity 5/10 Helpfulness 6/10 Language javascript

Source: www.makeuseof.com

Tags: javascript local-storage

Link to this answer
Share Copy Link