Skip to content

feat: dark mode master#200

Open
HathawayQAQ wants to merge 4 commits intoNetflix:masterfrom
HathawayQAQ:hathaway/feat/dark-mode-master
Open

feat: dark mode master#200
HathawayQAQ wants to merge 4 commits intoNetflix:masterfrom
HathawayQAQ:hathaway/feat/dark-mode-master

Conversation

@HathawayQAQ
Copy link
Copy Markdown

  • Unit tests related to the change have been updated

  • Documentation related to the change has been updated

    Description of the Change

    Add dark mode support to the Metaflow UI (addresses Dark Mode #157).

    • Add a [data-theme="dark"] CSS variable override block in theme.css that swaps color values when active. Component variables that reference base colors via var() cascade automatically, so only base colors and hardcoded values need overrides.
    • Add a ThemeProvider React context (following the same pattern as TimezoneProvider) that persists the user's choice to localStorage and defaults to the OS preference via prefers-color-scheme.
    • Add a theme toggle switch in the Quick Links menu.
    • Fix three pre-existing typos in the collapsable header CSS variables (font-familty, ---color-text-primary).

    Alternate Designs

    • styled-components ThemeProvider with JS theme objects: Considered but unnecessary — the codebase already uses CSS variables extensively, so a [data-theme] CSS selector is simpler and requires no changes to individual components.
    • Standalone toggle button in the AppBar: Considered, but placing it in the Quick Links menu follows the existing pattern (timezone selector) and keeps the header clean.

    Possible Drawbacks

    • Plugins rendered in iframes will not inherit the data-theme attribute and will remain in light mode.
      Supporting plugin dark mode would require passing the theme via postMessage, which is out of scope for this PR.
    • Some components outside of HelpMenu still use hardcoded hex colors instead of CSS variables. These will not respond to theme switching and may need follow-up work.

    Verification Process

    • Toggled between light and dark themes using the Quick Links menu toggle
    • Verified light mode renders identically to before (no visual regressions)
    • Verified theme preference persists across page refreshes via localStorage
    • Verified that without a stored preference, the theme follows the OS dark mode setting
    • Ran tsc --noEmit with zero errors

    Release Notes

    • Added dark mode with a theme toggle in the Quick Links menu. The UI respects the operating system's color scheme preference by default.

@HathawayQAQ HathawayQAQ marked this pull request as ready for review March 28, 2026 20:44
@HathawayQAQ HathawayQAQ changed the title Hathaway/feat/dark mode master feat: dark mode master Mar 28, 2026
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