React Theme Toggle with Persisted Light/Dark Mode

Challenge summary

The selected theme should be stored in localStorage and restored when the page reloads. React focus: use Context to persist theme in localStorage and sync the DOM attribute.

What you'll practice

• Render a main page layout with a simple content card and a theme toggle control in the top-right corner (UI is already provided via CSS).
• Support two themes: "light" and "dark".
• Store the current theme in a React Context provider (global-ish state).
• Persist the selected theme in localStorage under a stable key.
• On initial load, read the theme from localStorage and apply it before the user interacts.

What Premium unlocks

Premium unlocks the runnable workspace, behavioral checks, implementation walkthrough, and edge-case discussion.