[NickAkhmetov]

Summary

When a visualization is in fullscreen and its theme is set to dark, the entity header (which holds the share, theme, workspace and exit-fullscreen buttons) now uses the dark theme too, so it matches the visualization below it. Outside fullscreen the header is not attached to the visualization, so it stays light even when the dark theme is selected.

• EntityHeader: wrapped in a ThemeProvider that switches between the existing darkTheme and lightTheme from js/theme/theme, the same pair CellPopulationPlot already uses.
• WhiteBackground* buttons (shared-styles/buttons): the background was hard-coded to #fff, so in the dark header the light-purple dark-mode icons on the share and exit-fullscreen buttons were almost invisible. They now use theme.palette.background.paper, which is #fff in the default theme. Nothing changes outside the dark header.

Anything that opens from the header also renders dark while the header is dark, such as the share menu, tooltips and the new-workspace dialog.

The header is slightly lighter than Vitessce's #333. This is MUI's standard dark-mode overlay for raised surfaces (the header Paper has elevation={4}).

Stack

Merge in order. Each PR targets the branch of the PR before it, so its diff shows only its own changes.

1. NickAkhmetov/CAT-44 Match fullscreen visualization header to dark theme #4112 Match fullscreen visualization header to dark theme (this PR)
2. NickAkhmetov/Dark mode 1/8: Build the dark theme from a full dark palette #4115 Dark mode 1/8: Build the dark theme from a full dark palette
3. NickAkhmetov/Dark mode 2/8: Add a dark mode preference #4116 Dark mode 2/8: Add a dark mode preference
4. NickAkhmetov/Dark mode 3/8: Give the custom palette dark-mode values #4117 Dark mode 3/8: Give the custom palette dark-mode values
5. NickAkhmetov/Dark mode 4/8: Make shared primitives follow the theme #4118 Dark mode 4/8: Make shared primitives follow the theme
6. NickAkhmetov/Dark mode 5/8: Third-party widgets and light islands #4119 Dark mode 5/8: Third-party widgets and light islands
7. NickAkhmetov/Dark mode 6/8: Home page and remaining components #4120 Dark mode 6/8: Home page and remaining components
8. NickAkhmetov/Dark mode 7/8: Storybook theme switch and chart axis titles #4121 Dark mode 7/8: Storybook theme switch and chart axis titles
9. NickAkhmetov/Dark mode 8/8: Fix mismatched surfaces and unreadable text #4122 Dark mode 8/8: Fix mismatched surfaces and unreadable text

Design Documentation/Original Tickets

https://hms-dbmi.atlassian.net/browse/CAT-44

Testing

• Manual, against the local dev server on seqFISH dataset c6a254b2dc2ed46b002500ade163a7cc:
  • Fullscreen with the light theme: the header is unchanged.
  • Fullscreen with the dark theme: the header and its buttons are dark, and the share menu opens dark.
  • Exit fullscreen with the dark theme still selected: the header returns to light, and the inline visualization buttons keep their white background.
• pnpm tsc and eslint pass. The vitest suites under components/detailPage and shared-styles/buttons pass (206 tests).

Screenshots/Video

Light full screen

Dark full screen

Theme applies to share menu:

Theme does not apply to header outside of full screen mode:

Checklist

• Code follows the project's coding standards
  • Lint checks pass locally
  • New CHANGELOG-your-feature-name-here.md is present in the root directory, describing the change(s) in full sentences.
• Unit tests covering the new feature have been added
• All existing tests pass
• Any relevant documentation in JIRA/Confluence has been updated to reflect the new feature
• Any new functionalities have appropriate analytics functionalities added

Additional Notes

More changes will be stacked on top of this PR.