Skip to content

feat: Implement Dark Mode support#903

Open
Snehadas2005 wants to merge 2 commits intokubeflow:notebooks-v2from
Snehadas2005:temp
Open

feat: Implement Dark Mode support#903
Snehadas2005 wants to merge 2 commits intokubeflow:notebooks-v2from
Snehadas2005:temp

Conversation

@Snehadas2005
Copy link

@Snehadas2005 Snehadas2005 commented Feb 13, 2026 •
edited
Loading

Description

This PR implements Dark Mode support for the frontend application as requested in sub-issue #866 and parent issue #541. It introduces the necessary context and state management to handle theme toggling, persistence, and integration with both MUI and PatternFly.

Key Changes:

  • ThemeContext.tsx:
    • Added isDarkMode state and toggleDarkMode function.
    • Implemented localStorage persistence using the key kubeflow-dark-mode.
    • Automatically applies the .pf-v6-theme-dark class to the <html> element when dark mode is active (for PatternFly support).
    • Updates the MUI createTheme configuration to use palette: { mode: 'dark' } dynamically.
  • useThemeContext.ts:
    • Exposed isDarkMode and toggleDarkMode to be consumed by components (e.g., NavBar).

User Experience

  • Persistence: The user's theme preference is saved in localStorage and correctly restored upon page reload.
  • Immediate Feedback: Toggling the theme applies changes instantly without requiring a refresh.
  • Hybrid Support: Ensures both Material UI and PatternFly components receive the correct dark mode signals.

Acceptance Criteria Checklist

  • Logic for toggling between light and dark mode is implemented.
  • Preference is persisted in localStorage.
  • PatternFly dark class (.pf-v6-theme-dark) is applied to <html>.
  • MUI theme palette is updated to dark mode.

@Snehadas2005
feat: Implement Dark mode support
fb0454b 
Signed-off-by: Sneha Das <154408198+Snehadas2005@users.noreply.github.com>
@github-project-automation github-project-automation bot moved this to Needs Triage in Kubeflow Notebooks Feb 13, 2026
@google-oss-prow google-oss-prow bot added the area/frontend area - related to frontend components label Feb 13, 2026
@google-oss-prow google-oss-prow bot added area/v2 area - version - kubeflow notebooks v2 size/XXL labels Feb 13, 2026
@Snehadas2005 Snehadas2005 changed the title feat(frontend): Implement Dark Mode support feat(ui): Implement Dark Mode support Feb 13, 2026
@Snehadas2005 Snehadas2005 changed the title feat(ui): Implement Dark Mode support feat: Implement Dark Mode support Feb 13, 2026
@google-oss-prow google-oss-prow bot added area/ci area - related to ci size/XL and removed size/XXL labels Feb 13, 2026
@Snehadas2005 Snehadas2005 marked this pull request as draft February 13, 2026 23:11
@google-oss-prow
Copy link

google-oss-prow bot commented Feb 13, 2026

[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 paulovmr 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

@Snehadas2005 Snehadas2005 marked this pull request as ready for review February 13, 2026 23:16
@Snehadas2005
Copy link
Author

Snehadas2005 commented Feb 19, 2026

Hi @andyatmiami and @jenny-s51,
I have completed the implementation for Dark Mode support as described above.
Whenever you have time, could you please review this PR and share your feedback? I would appreciate your suggestions or any improvements I should make.
Thank you!

christian-heusel
christian-heusel suggested changes Feb 21, 2026
View reviewed changes
Copy link

@christian-heusel christian-heusel left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Snehadas2005, nice work on this! 🤗

There are currently a few things which are unreadable due to the new coloring such as most of the status pills:

Image

@Snehadas2005
style: enhance status pill visibility
b3cd23e 
Signed-off-by: Sneha Das <154408198+Snehadas2005@users.noreply.github.com>
@Snehadas2005
Copy link
Author

Snehadas2005 commented Feb 21, 2026

Hi @christian-heusel,
Thank you for pointing that out! I have updated the status pill styling to improve contrast and readability in dark mode, and attached a screenshot below reflecting the changes. The colours have been adjusted to ensure better visibility while still aligning with the overall theme.
Please let me know if this looks better now or if you would like any further refinements.

image

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

Reviewers

@ederign ederign Awaiting requested review from ederign

@paulovmr paulovmr Awaiting requested review from paulovmr

@christian-heusel christian-heusel Awaiting requested review from christian-heusel

Assignees

@christian-heusel christian-heusel

Labels

area/ci area - related to ci area/frontend area - related to frontend components area/v2 area - version - kubeflow notebooks v2 size/XXL

Projects

Kubeflow Notebooks
Status: Needs Triage

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Snehadas2005 @christian-heusel