Related to this comment: #22660 (review)

The majority of DevTools theme colors are stored in packages/react-devtools-shared/src/constants:
https://github.com/facebook/react/blob/5cccacd131242bdea2c2fe4b33fac50d2e3132b4/packages/react-devtools-shared/src/constants.js#L75-L383

But some of them are also stored in packages/react-devtools-shared/src/devtools/views/root.css:
https://github.com/facebook/react/blob/5cccacd131242bdea2c2fe4b33fac50d2e3132b4/packages/react-devtools-shared/src/devtools/views/root.css#L2-L18

This is because of how they are referenced in a theme-agnostic way by Reach UI style overrides (for things like tooltips and context menus).

Can we do better here, at least to ensure they stay in sync? For example, can the ThemeProvider set the redundant values at the root level when the SettingsContext theme changes?

The primary goals of the current architecture are:

1. Don't bleed styles into the global namespace (for our inline package users like Code Sandbox or Replay IO).
2. Don't require awkward forced layout or re-renders for components that read style values programatically.