kubeflow / kubeflow/katib

feat(ui): Add Dark/Light Mode Toggle to Katib UI

Open
#2,709 2 comments 0 reactions 1 assignee Claimed by @vjkumar2756 View on GitHub
kind/feature lifecycle/needs-triage
Dominant language
Python
Stars
1.7k
Forks
543
PR merge metrics
No merged PRs in 30d

Description

Add a **Dark / Light Mode theme toggle** to the Katib UI (`pkg/ui/v1beta1/frontend`).

#### Summary of Proposed Feature:
1. **Theme Toggle Button**: Add a theme switcher in the top navigation header to allow users to toggle seamlessly between Light and Dark themes.
2. **Persistent User Preference**: Store the selected theme in `localStorage` (`katib-theme`) so user preferences are retained across browser sessions.
3. **OS Color Scheme Auto-Detection**: Default to the system's preferred color scheme (`prefers-color-scheme`) on first visit.
4. **Theme Service**: Introduce `ThemeService` (`src/app/services/theme.service.ts`) with an RxJS `isDark$` stream to manage theme state reactively.
5. **CSS Custom Properties**: Define CSS variables for backgrounds, text, borders, cards, and modal elements for smooth 0.3s transitions between themes.
6. **Chart Theme Synchronization**: Dynamically update analytics chart text and grid colors (Chart.js / ngx-echarts) based on active theme state.

#### Why is this needed?
Hyperparameter tuning and Neural Architecture Search (NAS) experiments often run for hours or days. Machine learning engineers and platform admins spending extended periods monitoring experiments in the Katib UI will benefit significantly from reduced eye strain with dark mode support. Additionally, providing theme customization brings Katib UI in line with modern developer tool standards (e.g., MLflow, TensorBoard, Weights & Biases).

### Why is this needed?

Hyperparameter tuning and Neural Architecture Search (NAS) experiments often run for long durations (hours or days). Data scientists, ML engineers, and platform administrators spend extended periods monitoring experiment progress and trial metrics in the Katib UI.

Adding a Dark/Light Mode toggle addresses key user experience needs:

1. **Reduced Eye Strain**: A dark theme reduces visual fatigue during extended monitoring sessions and late-night debugging.
2. **User Choice & Accessibility**: Users working in high glare environments benefit from a light theme, while users in low light environments prefer a dark theme.
3. **Industry Standard Alignment**: Modern MLOps dashboards and developer platforms (such as TensorBoard, MLflow, and Weights & Biases) provide dark/light mode toggles as a standard UI capability.
4. **Improved Developer Experience**: Enhances the overall visual polish and usability of the Kubeflow Katib web interface.

### Love this feature?

Yes! Excited to contribute this feature to Kubeflow Katib to improve accessibility and user experience for all ML engineers and data scientists using the UI

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.