Skip to main content

Story 14.2: Theme Engine & Dark Mode

FieldValue
Story Points13
SprintSprint 62-63

User Story​

As a User (any role)
I want to switch between light and dark modes
So that I can use the platform comfortably in different lighting

Key Features​

  • System preference detection (prefers-color-scheme)
  • Manual toggle with persistence
  • Smooth transition animations
  • School branding adapts to dark mode
  • User preference synced across devices
  • Font scaling (normal, large, x-large)
  • High contrast mode option

CSS Architecture​

:root (primitives)
├── [data-theme="light"] (semantic tokens)
├── [data-theme="dark"] (semantic tokens)
└── School variables injected dynamically