Skip to content

Added dark mode toggle with persistent theme support#201

Open
zaidkid wants to merge 1 commit intoNetflix:masterfrom
zaidkid:dark-mode-toggle
Open

Added dark mode toggle with persistent theme support#201
zaidkid wants to merge 1 commit intoNetflix:masterfrom
zaidkid:dark-mode-toggle

Conversation

@zaidkid
Copy link
Copy Markdown

@zaidkid zaidkid commented Mar 31, 2026

Requirements for a pull request

Fill out the template below. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion.

  • Unit tests related to the change have been updated
  • Documentation related to the change has been updated

##Description of the Change

This PR introduces a dark mode toggle with persistent theme support to the Metaflow UI.
Users can now switch between light and dark themes directly from the AppBar. The selected theme is stored in localStorage and applied automatically on page reload.
The implementation uses a combination of styled-components for theme context and CSS variables for consistent styling across the application. Existing UI components were updated to use theme-aware variables instead of hardcoded colors.
This improves usability, accessibility, and aligns the UI with modern developer experience expectations.

##Alternate Designs
#Considered using only styled-components theming without CSS variables, but this would require refactoring many existing components.
#Chose a hybrid approach (ThemeProvider + CSS variables) to ensure compatibility with the current styling system and minimize invasive changes.

##Possible Drawbacks
#Some components may still rely on hardcoded styles and may require further updates for full theme consistency.
#Slight increase in complexity due to maintaining both CSS variables and theme context.

##Verification Process
#Ran the application locally using yarn start
#Verified that:
Theme toggle works correctly from the AppBar
Theme persists after page reload
UI updates instantly without refresh
#Checked UI consistency across:
Sidebar filters
Tables and data views
Navigation bar
Buttons (including "Reset view")
#Confirmed no console errors or build issues

##Release Notes

Added dark mode toggle with persistent theme support for improved UI/UX.

@zaidkid
Copy link
Copy Markdown
Author

zaidkid commented Mar 31, 2026

Hi! I’ve implemented dark mode with persistent theme support.

I’d really appreciate any feedback, especially regarding alignment with the existing theming system and UI consistency. Happy to iterate further!

Thanks!

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant