Skip to content

Add dark/light theme toggle #3

@Splestule

Description

@Splestule

Goal

Allow users to switch between dark and light themes for the UI panels (flight info, location selector, etc.)

Background

Currently, Aether uses a dark theme by default. Some users may prefer a light theme, especially when using the app during daytime or on devices with OLED screens.

What needs to be done

  1. Add CSS custom properties (variables) for theme colors in client/src/index.css
  2. Create a theme toggle button component
  3. Store theme preference in localStorage
  4. Apply theme class to root element

Relevant files

  • client/src/index.css - Global styles
  • client/src/App.tsx - Main app component (for theme state)
  • client/src/components/LocationSelector.tsx - Example panel to update

Acceptance criteria

  • Toggle button visible in UI
  • Theme persists across page reloads
  • All panels respect theme variables
  • Smooth transition between themes

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions