it is time

tasks/subtasks/theme-refactoring-05-theme-context.md

@@ -0,0 +1,80 @@
+# 05. Migrate ThemeContext to SolidJS Pattern
+
+meta:
+  id: theme-refactoring-05
+  feature: theme-refactoring-json-format
+  priority: P0
+  depends_on: [theme-refactoring-04]
+  tags: [implementation, context]
+
+objective:
+- Migrate ThemeContext from basic React context to SolidJS context pattern
+- Implement reactive state management for theme switching
+- Add persistence for theme selection and mode
+- Support system theme detection
+
+deliverables:
+- `src/context/ThemeContext.tsx` - Updated with SolidJS pattern
+- `src/utils/theme-context.ts` - Theme context utilities
+
+steps:
+- Step 5.1: Update `src/context/ThemeContext.tsx`
+  - Import SolidJS hooks: `createSignal`, `createEffect`, `createMemo`, `createStore`
+  - Replace React context with SolidJS `createSimpleContext` pattern (from opencode)
+  - Add theme loading logic
+  - Implement reactive theme state
+  - Add system theme detection
+  - Support theme persistence via localStorage
+
+- Step 5.2: Implement theme state management
+  - Create store with `themes`, `mode`, `active`, `ready`
+  - Initialize with default theme (opencode)
+  - Load custom themes from JSON files
+  - Handle system theme detection
+
+- Step 5.3: Add reactive theme resolution
+  - Create `createMemo` for resolved theme colors
+  - Create `createMemo` for syntax highlighting
+  - Create `createMemo` for subtle syntax
+
+- Step 5.4: Implement theme switching
+  - Add `setTheme(theme: string)` method
+  - Add `setMode(mode: "dark" | "light")` method
+  - Persist theme and mode to localStorage
+
+- Step 5.5: Add system theme detection
+  - Detect terminal background and foreground colors
+  - Generate system theme based on terminal palette
+  - Handle system theme preference changes
+
+tests:
+- Unit:
+  - Test theme state initialization
+  - Test theme switching logic
+  - Test mode switching logic
+  - Test system theme detection
+  - Test localStorage persistence
+
+- Integration/e2e:
+  - Test theme context in component tree
+  - Test reactive theme updates
+  - Test system theme changes
+
+acceptance_criteria:
+- `src/context/ThemeContext.tsx` uses SolidJS pattern
+- Theme context provides reactive theme state
+- Theme switching works correctly
+- System theme detection is functional
+- Theme and mode are persisted to localStorage
+
+validation:
+- Run: `bun run typecheck` - Should pass
+- Run: `bun test src/context/ThemeContext.test.ts`
+- Test theme switching in application
+- Test system theme detection
+
+notes:
+- Use opencode's ThemeProvider pattern as reference
+- Follow SolidJS best practices for reactive state
+- Ensure proper cleanup of effects and listeners
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme.tsx` (lines 279-392)