Piyush's Blog

Day-16 React with Me

Piyush's photo
Piyush
·

2 min read

Dark Mode with Context API

What is ContextApi

The Context API in React is a way to create and manage global state that can be shared across the entire application without passing props down manually through every level of the component tree. It is particularly useful for managing state that needs to be accessed by many components at different levels, such as theme settings, user information, or application settings.

  • Context Object: Created using React.createContext(), it provides two main components:

    • Provider: This component wraps part of your application and makes the context value available to all components inside it.

    • Consumer: This component is used to consume the context value within a component.

  • Provider: This is used to pass the current state to the tree below it. It takes a value prop that can be accessed by any component wrapped within this provider.

  • Consumer: This is used to access the context value within a component. More commonly, the useContext hook is used to consume the context in functional components.

In our project we have use context API for managing theme settings.

1)Creating ThemeContext:

import { ThemeContext, ThemeProvider } from "./context/themeContext";

const AppLayout = () => {
  const [themeMode, setThemeMode] = useState("light");

  const lightTheme = () => {
    setThemeMode("light");
  };
  const darkTheme = () => {
    setThemeMode("dark");
  };

  useEffect(() => {
    const lighAndDark = document.querySelector("html").classList;
    lighAndDark.remove("light", "dark");
    lighAndDark.add(themeMode);
  }, [themeMode]);

  return (
        <div className="app">
          <ThemeProvider value={{ themeMode, lightTheme, darkTheme }}>
            <Header />
          </ThemeProvider>
          <Outlet />
          <Footer />
        </div>
  );
};

2)Using ThemeContext in a Component:

import React from "react";
import usetheme from "../context/themeContext";

function ThemeButton() {
  const { themeMode, lightTheme, darkTheme } = usetheme();
  const onChangeBtn = (e) => {
    const darkStatus = e.currentTarget.checked;
    if(darkStatus){
      darkTheme();
    } else {
      lightTheme();
    }
  };

  return (
    <label className="relative inline-flex items-center cursor-pointer">
      <input
        type="checkbox"
        className="sr-only peer"
        onChange={onChangeBtn}
        checked={themeMode === "dark"}
      />
      <div className="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:bg-blue-600"></div>
    </label>
  );
}

export default ThemeButton;

We created have a ThemeContext to manage the theme mode of our application. The ThemeProvider wraps part of the application and provides the current theme state and functions to switch themes. In the ThemeButton component, we consume the ThemeContext to access the current theme mode and to switch between light and dark themes.

Summary

  • ThemeContext: Used to manage and provide theme settings (light/dark mode) across our application.

Context is created and provided in AppLayout, and consumed in various components like Header and ThemeButton using the useContext hook. This allows these components to access and respond to changes in the global state without prop drilling.

Light Mode:

Dark Mode:

Reactcontext APIdark mode