Deviopath › React

Theme Context

Hard · Context

Goal: share theme settings through context (createContext + useContext) instead of props.

Suggested approach: App keeps theme ("light"/"dark", default "light") and accent ("blue"/"green"/"red", default "blue") in state and provides them, with functions to change them, through ThemeContext. It renders <Header />, <Settings /> and <Content /> without props.

- Header: <header className={theme}> with <h1>My Site</h1> and a nested ThemeButton.

- ThemeButton: "Switch to dark" in light mode, "Switch to light" in dark mode; toggles the theme.

- Settings: <select className="accent"> (blue, green, red) changes the accent.

- Content: <main className={theme}> with a nested Card.

- Card: <div className={"card " + accent}> with <p>Current theme: light</p> and <p>Accent: blue</p>.

Next: Toast Notifications