Skip to main content

DarkmodeContext

DarkmodeContext.jsx is a React file responsible for managing the dark mode state in your web application. It includes a context provider and a custom hook for easy integration into your components.

Usage​

DarkModeProvider​

DarkModeProvider is a higher-order component that wraps your application or a specific section where you want to enable dark mode.

useDarkMode Hook​

useDarkMode is a custom hook that allows you to consume the dark mode state and toggle function within your components. Example


import { useDarkMode } from 'path/to/DarkmodeContext';

function DarkModeToggle() {
  const { isDarkMode, toggleDarkMode } = useDarkMode();

  return (
    <div className={`${isDarkMode ? "text-darkmodetext bg-darkbg":"bg-lbg text-tprim"}`}>
      <button onClick={toggleDarkMode}>Toggle Dark Mode</button>
    </div>
  );
}

Local Storage​

The dark mode state is stored in localStorage to persist the user's preference between sessions.