Skip to content

Add dark mode support#214

Draft
ttonyxx wants to merge 1 commit intomainfrom
feature/dark-mode
Draft

Add dark mode support#214
ttonyxx wants to merge 1 commit intomainfrom
feature/dark-mode

Conversation

@ttonyxx
Copy link
Contributor

@ttonyxx ttonyxx commented Feb 15, 2026

Summary

  • Add comprehensive dark mode using CSS custom properties synced with Vuetify's .theme--dark class
  • Dark mode toggle in Settings with localStorage persistence and OS prefers-color-scheme fallback
  • Flash prevention via synchronous inline script in <head>
  • Migrate all hardcoded light-mode color classes across 50+ components to semantic tokens (tw-bg-surface, tw-text-text-primary, etc.)
  • Update schedule overlap heatmap colors, ZigZag, ColorLegend, and OverflowGradient for dark backgrounds

Test plan

  • Toggle dark mode in Settings — all pages should switch instantly
  • Refresh page — preference persists, no flash of light theme
  • Check key pages: Landing, Home/Dashboard, Event (schedule overlap grid), Settings, all dialogs
  • Verify schedule overlap: availability green/red/yellow heatmap colors are readable on dark background
  • Check mobile views (header, FAB, bottom sheets)
  • New browser with no preference — falls back to OS dark/light setting

🤖 Generated with Claude Code

Implement comprehensive dark mode using CSS custom properties as the
color-switching mechanism, synced with Vuetify's .theme--dark class.

- Add semantic color tokens in Tailwind config (surface, text-primary, etc.)
- Define light/dark CSS variables in index.css for all theme colors
- Add Vuetify dark theme configuration
- Create dark_mode.js utility for persistence and OS preference fallback
- Add dark mode toggle in Settings with localStorage persistence
- Add flash prevention script in index.html
- Migrate all hardcoded color classes across 50+ components to semantic tokens
- Update ScheduleOverlap heatmap colors with themeColors computed property
- Update ZigZag, ColorLegend, OverflowGradient to use CSS variables

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant