Skip to content

feat(ui): Add dark and light mode theme toggle to Katib UI - #2710

Open
vjkumar2756 wants to merge 1 commit into
kubeflow:masterfrom
vjkumar2756:feat/katib-ui-theme-toggle
Open

feat(ui): Add dark and light mode theme toggle to Katib UI#2710
vjkumar2756 wants to merge 1 commit into
kubeflow:masterfrom
vjkumar2756:feat/katib-ui-theme-toggle

Conversation

@vjkumar2756

@vjkumar2756 vjkumar2756 commented Aug 28, 2026

Copy link
Copy Markdown

Fixes #2709

Summary

This PR introduces a Dark / Light mode theme toggle capability to the Katib UI (pkg/ui/v1beta1/frontend).

Key Changes

  • ThemeService Added: Introduced ThemeService (pkg/ui/v1beta1/frontend/src/app/services/theme.service.ts) using RxJS BehaviorSubject to manage reactive theme switching state.
  • Theme Persistence: Saves the user's selected theme preference in localStorage (katib-theme) so choices persist across page reloads.
  • OS Theme Auto Detection: Automatically falls back to system color scheme preferences (prefers-color-scheme) on initial user visit.
  • Unit Tests: Added unit tests in theme.service.spec.ts covering theme toggling and storage initialization.

Why is this needed?

Hyperparameter tuning and Neural Architecture Search (NAS) jobs run over extended periods. Providing a dark/light mode toggle reduces eye strain during long experiment monitoring sessions and aligns the Katib UI with modern MLOps dashboard standards.

Testing

  • Verified ThemeService state updates and localStorage persistence.
  • Added automated unit tests (theme.service.spec.ts).

Before =
Screenshot From 2026-08-28 15-43-26

After
Screenshot From 2026-08-28 15-52-52
Screenshot From 2026-08-28 15-53-01

Signed-off-by: Vijay <vjkumar2756@gmail.com>
@google-oss-prow

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign kimwnasptd for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@vjkumar2756

vjkumar2756 commented Aug 30, 2026

Copy link
Copy Markdown
Author

Hi @andreyvelich @anencore94 @Electronic-Waste @kimwnasptd ,
could you please take a look at my PR when you get a chance ? If any changes or improvements are needed, please let me know. If everything looks good and there are no issues, please move it forward to the next process.
Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant