pipe-cd / pipe-cd/pipecd

Issue: Add Dark Mode Support and Theming Consistency

Open
#6,765 2 comments 0 reactions 0 assignees View on GitHub

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

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.