Update task task-012

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
+
+<!-- SECTION:DESCRIPTION:BEGIN -->
+Implement dark mode theme support for the canvas interface.
+
+## Branch Info
+- **Branch**: `dark-mode`
+<!-- SECTION:DESCRIPTION:END -->
+
+## Acceptance Criteria
+<!-- AC:BEGIN -->
+- [x] #1 Create dark theme colors
+- [x] #2 Add theme toggle
+- [x] #3 Persist user preference
+- [x] #4 System theme detection
+<!-- AC:END -->
+
+## Implementation Notes
+
+<!-- SECTION:NOTES:BEGIN -->
+## 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
+<!-- SECTION:NOTES:END -->