Challenge: Theme provider

Write a dark/light theme provider with context + useReducer.

Challenge: Theme provider

In this challenge you write a theme context and a ThemeProvider component. The theme state holds "light" or "dark"; toggleTheme switches them.

The context value provides { theme, toggleTheme }. Consuming components read it with useContext.

This is the standard pattern for dark/light theme switching.

Exercise Write ThemeProvider

Create ThemeContext with createContext. Write a ThemeProvider component: keep theme in useState("light"), define a toggleTheme function (light becomes dark, dark becomes light). Provide value={{ theme, toggleTheme }} via ThemeContext.Provider and render children. Export both ThemeProvider and ThemeContext.

Show example solution

import { createContext, useState } from "react";

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

Test yourself

What should the context provide as value?
- Only the theme color
- Only toggleTheme
- Theme and toggleTheme function
- All CSS styles
Show answer

Theme and toggleTheme function — { theme, toggleTheme } gives both state and toggler.

toggleTheme

function toggleTheme() {
  setTheme(theme === "light" ? "dark" : ____);
}

Show answer

function toggleTheme() {
  setTheme(theme === "light" ? "dark" : "light");
}

Next lesson: Challenge: Memoized list

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies