How to implement a light/dark mode toggle with local storage in React

Implementing a light/dark mode toggle with local storage in React involves managing the theme state, toggling between light and dark modes, persisting the selected theme in local storage, and applying the selected theme to the entire application. Here's a step-by-step guide on how to achieve this:

1. Create a Theme Context:

   First, create a context to manage the theme state throughout your application. This context will provide the theme state and a function to toggle between light and dark modes.

   jsxCopy code
   import React, { createContext, useState, useContext, useEffect } from 'react';
   
   const ThemeContext = createContext();
   
   export const useTheme = () => useContext(ThemeContext);
   
   export const ThemeProvider = ({ children }) => {
     const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
   
     const toggleTheme = () => {
       const newTheme = theme === 'light' ? 'dark' : 'light';
       setTheme(newTheme);
       localStorage.setItem('theme', newTheme);
     };
   
     useEffect(() => {
       const storedTheme = localStorage.getItem('theme');
       if (storedTheme) {
         setTheme(storedTheme);
       }
     }, []);
   
     return (
       <ThemeContext.Provider value={{ theme, toggleTheme }}>
         {children}
       </ThemeContext.Provider>
     );
   };
   

2. Create a Theme Toggle Button:

   Create a button component to toggle between light and dark modes. This button will use the toggleTheme function provided by the theme context.

   jsxCopy code
   import React from 'react';
   import { useTheme } from './ThemeContext';
   
   const ThemeToggle = () => {
     const { theme, toggleTheme } = useTheme();
   
     return (
       <button onClick={toggleTheme}>
         {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
       </button>
     );
   };
   
   export default ThemeToggle;
   

3. Apply Theme Styles:

   Apply different styles for light and dark modes using CSS variables or class names. You can use the theme state provided by the context to conditionally apply styles.

4. Wrap Your App with the Theme Provider:

   Wrap your entire application with the ThemeProvider to provide the theme context to all components.

   jsxCopy code
   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import { ThemeProvider } from './ThemeContext';
   
   ReactDOM.render(
     <React.StrictMode>
       <ThemeProvider>
         <App />
       </ThemeProvider>
     </React.StrictMode>,
     document.getElementById('root')
   );
   

5. Use the Theme in Your Components:

   In your components, use the useTheme hook to access the current theme and apply styles accordingly.

   jsxCopy code
   import React from 'react';
   import { useTheme } from './ThemeContext';
   
   const MyComponent = () => {
     const { theme } = useTheme();
   
     return (
       <div className={theme === 'light' ? 'light-mode' : 'dark-mode'}>
         {/* Content */}
       </div>
     );
   };
   
   export default MyComponent;
   

6. Optional: Apply Theme Styles:

   Apply theme styles using CSS variables or class names based on the theme state.

7. Test Your App:

   Test your app to ensure that the light/dark mode toggle works correctly and that the selected theme persists across page reloads.

By following these steps, you can implement a light/dark mode toggle with local storage in your React application. This approach provides a seamless user experience by allowing users to customize the theme based on their preferences.