Issue: Add Dark Mode Support and Theming Consistency
Nobody has claimed this yet.
- Dominant language
- Go
- Stars
- 1.4k
- Forks
- 364
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 84
Description
Issue: Add Dark Mode Support and Theming Consistency
Description
The PipeCD web application currently lacks comprehensive dark mode support and theme switching functionality. The UI is light-themed only, and there is no consistent theming system across the application that allows users to toggle between light and dark modes.
Problem Statement
- No Dark Mode Theme: The application only supports a light color palette
- No Theme Switcher UI: Users cannot switch between themes
- No Theme Persistence: Theme preference is not saved across sessions
- Inconsistent Theming: No centralized theme provider or context management
- Missing Documentation: Lack of integration with Material-UI theme system for proper dark mode support
Expected Behavior
- Users should be able to toggle between light and dark modes via a UI button
- Theme preference should persist across browser sessions using localStorage
- The application should respect system theme preference on first load
- All components should automatically adapt to the selected theme
- Dark mode should provide proper contrast and readability
Acceptance Criteria
- Light and dark theme palettes defined in MUI theme
- ThemeProvider context created for centralized theme management
- Theme toggle button visible in the header
- Theme preference persists to localStorage
- System theme preference detection implemented
- All UI components properly themed in both modes
- No TypeScript errors
- Theme switch works on all pages (login and authenticated)
Related Issues
- Theme/Dark mode consistency across docs and web UI
- Navigation improvements needed for better UX
Priority
Medium - Improves user experience and accessibility
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No files or tests are named. Start by locating the web application's Material-UI setup, theme entry points, header, and login flow; then trace how authenticated pages are rendered. Done means light and dark palettes, a visible toggle, localStorage persistence, system preference detection, and consistent behavior across login and authenticated pages without TypeScript errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100