Dashboard: Dark theme styling #9

Closed
opened 2026-03-05 18:45:12 -06:00 by jeremy · 0 comments
Owner

Define and apply a cohesive dark theme across the entire dashboard using CSS variables.

Tasks

  • Define CSS custom properties (variables) for color palette
  • Dark backgrounds: --bg-primary, --bg-secondary, --bg-card
  • Text colors: --text-primary, --text-secondary, --text-muted
  • Status colors: --status-running (green), --status-stopped (gray), --status-exited (red), --status-restarting (yellow)
  • Accent color for buttons and highlights
  • Match the aesthetic of Grafana/Frigate (dark gray, not pure black)
  • Responsive layout for wide monitors (1440p+)

Reference

  • Grafana dark theme: #111217 background, #1f2228 panels, #e0e0e0 text
  • Frigate: similar dark gray palette
Define and apply a cohesive dark theme across the entire dashboard using CSS variables. ## Tasks - [ ] Define CSS custom properties (variables) for color palette - [ ] Dark backgrounds: --bg-primary, --bg-secondary, --bg-card - [ ] Text colors: --text-primary, --text-secondary, --text-muted - [ ] Status colors: --status-running (green), --status-stopped (gray), --status-exited (red), --status-restarting (yellow) - [ ] Accent color for buttons and highlights - [ ] Match the aesthetic of Grafana/Frigate (dark gray, not pure black) - [ ] Responsive layout for wide monitors (1440p+) ## Reference - Grafana dark theme: #111217 background, #1f2228 panels, #e0e0e0 text - Frigate: similar dark gray palette
jeremy added this to the v1.0 milestone 2026-03-05 18:45:12 -06:00
jeremy added the feature label 2026-03-05 18:45:12 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: jeremy/farm-manager#9