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
- Add CSS custom properties (variables) for theme colors in client/src/index.css
- Create a theme toggle button component
- Store theme preference in
localStorage
- 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
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
localStorageRelevant files
Acceptance criteria