Added dark mode toggle with persistent theme support#201
Open
zaidkid wants to merge 1 commit intoNetflix:masterfrom
Open
Added dark mode toggle with persistent theme support#201zaidkid wants to merge 1 commit intoNetflix:masterfrom
zaidkid wants to merge 1 commit intoNetflix:masterfrom
Conversation
Author
|
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! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
##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.