68 lines
2.1 KiB
Markdown
68 lines
2.1 KiB
Markdown
---
|
|
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 -->
|