JAVASCRIPT

Implement Dark Mode Toggle with a `useDarkMode` Hook

Create a versatile `useDarkMode` React hook that allows users to toggle between light and dark themes, persisting their preference and respecting system settings.

import { useState, useEffect } from 'react';

function useDarkMode() {
  const [isEnabled, setIsEnabled] = useState(() => {
    try {
      const item = window.localStorage.getItem('darkMode');
      return item ? JSON.parse(item) : window.matchMedia('(prefers-color-scheme: dark)').matches;
    } catch (error) {
      console.error(error);
      return false; // Default to light mode on error
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem('darkMode', JSON.stringify(isEnabled));
    } catch (error) {
      console.error(error);
    }

    const className = 'dark';
    const element = window.document.body;
    if (isEnabled) {
      element.classList.add(className);
    } else {
      element.classList.remove(className);
    }
  }, [isEnabled]);

  return [isEnabled, setIsEnabled];
}

// Example Usage:
// function MyComponent() {
//   const [darkMode, setDarkMode] = useDarkMode();

//   const toggleDarkMode = () => {
//     setDarkMode(prevMode => !prevMode);
//   };

//   return (
//     <div>
//       <button onClick={toggleDarkMode}>
//         Toggle {darkMode ? 'Light' : 'Dark'} Mode
//       </button>
//       <p>Current theme: {darkMode ? 'Dark' : 'Light'}</p>
//     </div>
//   );
// }
// Remember to add .dark { background: #333; color: #eee; } to your CSS

How it works: The `useDarkMode` hook manages the application's dark mode state. It initializes by checking local storage for a previous preference, otherwise falling back to the user's system preference using `matchMedia`. A `useEffect` then updates local storage and adds or removes a 'dark' class from the `body` element, allowing CSS to apply the appropriate theme based on the `isEnabled` state.

Implement Dark Mode Toggle with a `useDarkMode` Hook

Need help integrating this into your project?