diff --git a/backlog/tasks/task-012 - Dark-Mode-Theme.md b/backlog/tasks/task-012 - Dark-Mode-Theme.md new file mode 100644 index 0000000..dcd6d42 --- /dev/null +++ b/backlog/tasks/task-012 - Dark-Mode-Theme.md @@ -0,0 +1,67 @@ +--- +id: task-012 +title: Dark Mode Theme +status: Done +assignee: [] +created_date: '2025-12-03' +updated_date: '2025-12-04 06:29' +labels: + - feature + - ui + - theme +dependencies: [] +priority: medium +--- + +## Description + + +Implement dark mode theme support for the canvas interface. + +## Branch Info +- **Branch**: `dark-mode` + + +## Acceptance Criteria + +- [x] #1 Create dark theme colors +- [x] #2 Add theme toggle +- [x] #3 Persist user preference +- [x] #4 System theme detection + + +## Implementation Notes + + +## Implementation Complete (2025-12-03) + +### Components Updated: + +1. **Mycelial Intelligence (MI) Bar** (`src/ui/MycelialIntelligenceBar.tsx`) + - Added dark mode color palette with automatic switching based on `isDark` state + - Dark backgrounds, lighter text, adjusted shadows + - Inline code blocks use CSS class for proper dark mode styling + +2. **Comprehensive CSS Dark Mode** (`src/css/style.css`) + - Added CSS variables: `--card-bg`, `--input-bg`, `--muted-text` + - Dark mode styles for: blockquotes, tables, navigation, command palette, MDXEditor, chat containers, form inputs, error/success messages + +3. **UserSettingsModal** (`src/ui/UserSettingsModal.tsx`) + - Added `colors` object with dark/light mode variants + - Updated all inline styles to use theme-aware colors + +4. **StandardizedToolWrapper** (`src/components/StandardizedToolWrapper.tsx`) + - Added `useIsDarkMode` hook for dark mode detection + - Updated wrapper backgrounds, shadows, borders, tags styling + +5. **Markdown Tool** (`src/shapes/MarkdownShapeUtil.tsx`) + - Dark mode detection with automatic background switching + - Fixed scrollbar: vertical only, hidden when not needed + - Added toolbar minimize/expand button + +### Technical Details: +- Automatic detection via `document.documentElement.classList` observer +- CSS variables for base styles that auto-switch in dark mode +- Inline style support with conditional color objects +- Comprehensive coverage of all major UI components and tools +