Theming System — Dark/Light Mode & Responsive Layout

[ElioNeto]

Theming System — Dark/Light Mode & Responsive Layout

Implement a complete theming system for the Angular frontend with dark/light mode support and responsive layout improvements.

Current State

• Single dark theme with hardcoded colors in styles.scss
• No responsive breakpoints
• Sidebar navigation is fixed width
• No mobile support

Requirements

1. CSS Custom Properties Theming

// styles.scss
:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #121626;
  --bg-card: #1a1f35;
  --text-primary: #dce1f5;
  --text-secondary: #5a648c;
  --border-color: #374164;
  --accent-primary: #ff6e1e;
  --accent-secondary: #648cf0;
  --success: #50dc82;
  --warning: #ffc832;
  --error: #ff5050;
  --sidebar-width: 260px;
}

[data-theme="light"] {
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --text-primary: #1a1f35;
  --text-secondary: #5a648c;
  --border-color: #d1d5e0;
  --accent-primary: #e85d12;
  --accent-secondary: #4a7ae8;
}

2. Theme Toggle

• Toggle Button: Sun/Moon icon in sidebar header or top bar
• Persistence: Save preference to localStorage
• System Preference: Respect prefers-color-scheme media query
• Transition: Smooth color transition on toggle

3. Responsive Layout

• Breakpoints:
  • Mobile: < 768px (single column, hamburger menu)
  • Tablet: 768–1024px (collapsible sidebar)
  • Desktop: > 1024px (full layout)
• Sidebar: Collapsible on mobile with overlay
• Content Area: Fluid width, responsive grid
• Tables: Horizontal scroll on small screens
• Forms: Full-width on mobile, inline on desktop

4. Existing Pages Audit

Audit all existing pages for responsive issues:

• Dashboard: Stat cards should wrap to 2-column on tablet, 1-column on mobile
• Key Explorer: Operations section should stack vertically on mobile
• Stats: Stat cards should wrap, tables should scroll horizontally
• Features: Flag cards should be full-width on mobile
• Admin: Form sections should stack vertically on mobile

Acceptance Criteria

• Dark/light mode toggle works and persists
• All pages render correctly on mobile (320px+)
• All pages render correctly on tablet
• Sidebar collapses on mobile with hamburger toggle
• No horizontal overflow on any page
• Transitions are smooth (no jarring color changes)
• System theme preference is respected on first visit

Parent Epic

#290

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321)