Theme System

Three Modes

How It Works

  1. useTheme() composable manages mode state
  2. cycleTheme() rotates: dark → light → system
  3. Adds/removes dark or light class on <html> element
  4. PrimeVue detects theme via darkModeSelector: '.dark'
  5. Persisted in localStorage key "theme"
  6. Flash prevention: inline <script> in index.html <head> applies theme before Vue hydration

CSS Variables

Responsive Breakpoints

Breakpoint Width Layout
Desktop > 1024px Full sidebar (240px fixed), 2-column forms
Tablet ≤ 1024px Hamburger menu, collapsible drawer sidebar
Mobile < 768px Column hiding in tables, single-column forms, stacked cards

Mobile Adaptations