🌙 [FEATURE] Full Dark Mode Support

[SH20RAJ]

Description

Add dark mode support for better user experience, especially in low-light environments. Includes:

• System preference detection
• Manual toggle
• Persistent preference storage
• All component support

Current State

• theme-toggle.tsx components exist
• Need full implementation across all components

Acceptance Criteria

• Detect system color scheme preference
• Add dark mode toggle in settings
• Persist dark mode preference
• Update all components for dark mode
• Ensure sufficient color contrast
• Test Excalidraw dark theme
• Test Plate.js editor dark theme
• Add dark mode to exported images
• Create dark mode CSS variables
• Test on multiple browsers

Implementation

const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.toggle('dark', isDark);

Colors

• Primary: Adjust for readability in dark
• Background: Use true black (#000000) or near-black
• Text: Use near-white (#F5F5F5)
• Borders: Subtle gray

Type

Enhancement / Feature

Priority

Medium - Improves UX