I mostly use the "dark" theme which these badges looked good in. The "light" theme is broken though. No contrast.
showInlineWarningsAndErrors: boolean,
  setShowInlineWarningsAndErrors: (value: boolean) => void,
  theme: Theme,
  setTheme(value: Theme): void,
  traceUpdatesEnabled: boolean,
  setTraceUpdatesEnabled: (value: boolean) => void,
|};
const SettingsContext = createContext<Context>(((null: any): Context));
SettingsContext.displayName = 'SettingsContext';
type DocumentElements = Array<HTMLElement>;
type Props = {|
  browserTheme: BrowserTheme,
  children: React$Node,
  componentsPortalContainer?: Element,
  profilerPortalContainer?: Element,
|};
function SettingsContextController({
  browserTheme,
  children,
  componentsPortalContainer,
  profilerPortalContainer,
}: Props) {
  const bridge = useContext(BridgeContext);
  const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(
    'React::DevTools::displayDensity',
    'compact',
  );
  const [theme, setTheme] = useLocalStorage<Theme>(
    'React::DevTools::theme',
    'auto',