81 lines
2.6 KiB
Markdown
81 lines
2.6 KiB
Markdown
# 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)
|