Step 1 of 6
Create Theme Context
Provide global theme state and toggle function.
The app is a React (or similar) SPA with a top‑level App component. No existing theme system.
Create a new file src/theme/ThemeContext.{js,tsx} that: 1. Imports createContext, useState, useEffect from React. 2. Defines a ThemeContext via createContext({ theme: 'light', toggleTheme: () => {} }). 3. Exports a ThemeProvider component that: a. Initializes theme state from localStorage key 'appTheme' (fallback 'light'). b. Provides toggleTheme that switches between 'light' and 'dark', updates state, and writes the new value to localStorage. c. Wraps its children with ThemeContext.Provider passing { theme, toggleTheme }. 4. Export both ThemeContext and ThemeProvider. Ensure no JSX placeholders; actual functional code only.
Expected after this step
A functional ThemeContext module that can be imported without errors.
Should not happen
- ✕AI returns placeholder comments like // TODO instead of real code
- ✕ThemeContext does not actually read/write localStorage
- ✕CSS variables are declared but never applied via class
- ✕Toggle button does not call the context function
Verify before continuing
Do not move on until every check is true. The complete button stays locked until then.
Do not continue if…
- !AI returns placeholder comments like // TODO instead of real code
- !ThemeContext does not actually read/write localStorage
- !CSS variables are declared but never applied via class
- !Toggle button does not call the context function
- !Root element class never updates, breaking visual change
- !Persistence test omitted or uses fake data
If the AI messes this up
Use this when the AI fakes progress or breaks the feature. It forces a real fix.
The generated ThemeContext does not actually persist to localStorage or fails to export. Provide concrete code that fulfills all three checklist items.