Issue: Add Dark Mode Support and Theming Consistency

[Ansita20]

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

1. No Dark Mode Theme: The application only supports a light color palette
2. No Theme Switcher UI: Users cannot switch between themes
3. No Theme Persistence: Theme preference is not saved across sessions
4. Inconsistent Theming: No centralized theme provider or context management
5. 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

[AbhiramDhanvi]

/assign

[Ansita20]

/assign

Sorry I am working in this