Dashboard: Dark Mode Theme Implementation

[0xdevcollins]

Summary

Implement full dark mode for the merchant dashboard, matching the design brief color tokens.

Requirements

• Dark mode color tokens (from Design Brief §4.2 & §08):
  • Page background: #0B1628 (Surface Dark)
  • Card/panel background: #1A2332 (derived)
  • Sidebar background: #0F1D2E (derived)
  • Primary text: #F8F9FA
  • Secondary text: #6C757D
  • Border/divider: #2D3748 (derived)
  • Input background: #1A2332
  • Input border: #2D3748
  • Code block bg: #0B1628
• Primary brand colors (Useroutr Blue, Stellar Teal, status colors) remain consistent
• Theme toggle:
  • Toggle in top bar (sun/moon icon)
  • Respects system preference by default
  • Persists user choice in localStorage
• CSS variables or Tailwind dark: class for all color tokens
• All dashboard components must support both modes:
  • Charts (Recharts) with dark-compatible colors
  • Data tables with dark row hover
  • Modals/drawers with dark background
  • Form inputs readable in both modes
• No hardcoded hex values — all colors via CSS variables

Acceptance Criteria

• All dashboard pages render correctly in dark mode
• Theme toggle in top bar works
• System preference respected on first visit
• Preference persisted across sessions
• Charts and data visualizations dark-mode compatible
• No contrast/readability issues (WCAG AA minimum)

[Ekene001]

@0xdevcollins pls review