canvas-website/backlog/tasks/task-012 - Dark-Mode-Theme.md

id	title	status	assignee	created_date	updated_date	labels	dependencies	priority
task-012	Dark Mode Theme	Done		2025-12-03	2025-12-04 06:29	feature ui theme		medium

Description

Implement dark mode theme support for the canvas interface.

Branch Info

• Branch: dark-mode

Acceptance Criteria

• #1 Create dark theme colors
• #2 Add theme toggle
• #3 Persist user preference
• #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