From 643d3225c92a6c4a7935852032ef6536a8b06bc4 Mon Sep 17 00:00:00 2001
From: Houssem Chebab <houssemchebeb@gmail.com>
Date: Sat, 24 Jul 2021 08:17:27 +0100
Subject: [PATCH 1/8] Devtools: Refactor imperative theme code

---
 .../src/devtools/views/DevTools.js            |  61 ++--
 .../views/Settings/SettingsContext.js         | 328 +-----------------
 .../src/devtools/views/ThemeProvider.js       | 301 ++++++++++++++++
 .../src/devtools/views/portaledContent.js     |   3 +-
 .../src/devtools/views/root.css               | 260 +-------------
 5 files changed, 346 insertions(+), 607 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ThemeProvider.js

diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 3c768c11ab97..190fa7917a57 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -31,6 +31,7 @@ import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
 import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
+import ThemeProvider from './ThemeProvider';
 
 import styles from './DevTools.css';
 
@@ -220,38 +221,40 @@ export default function DevTools({
                   <TreeContextController>
                     <ProfilerContextController>
                       <SchedulingProfilerContextController>
-                        <div className={styles.DevTools} ref={devToolsRef}>
-                          {showTabBar && (
-                            <div className={styles.TabBar}>
-                              <ReactLogo />
-                              <span className={styles.DevToolsVersion}>
-                                {process.env.DEVTOOLS_VERSION}
-                              </span>
-                              <div className={styles.Spacer} />
-                              <TabBar
-                                currentTab={tab}
-                                id="DevTools"
-                                selectTab={setTab}
-                                tabs={tabs}
-                                type="navigation"
+                        <ThemeProvider>
+                          <div className={styles.DevTools} ref={devToolsRef}>
+                            {showTabBar && (
+                              <div className={styles.TabBar}>
+                                <ReactLogo />
+                                <span className={styles.DevToolsVersion}>
+                                  {process.env.DEVTOOLS_VERSION}
+                                </span>
+                                <div className={styles.Spacer} />
+                                <TabBar
+                                  currentTab={tab}
+                                  id="DevTools"
+                                  selectTab={setTab}
+                                  tabs={tabs}
+                                  type="navigation"
+                                />
+                              </div>
+                            )}
+                            <div
+                              className={styles.TabContent}
+                              hidden={tab !== 'components'}>
+                              <Components
+                                portalContainer={componentsPortalContainer}
+                              />
+                            </div>
+                            <div
+                              className={styles.TabContent}
+                              hidden={tab !== 'profiler'}>
+                              <Profiler
+                                portalContainer={profilerPortalContainer}
                               />
                             </div>
-                          )}
-                          <div
-                            className={styles.TabContent}
-                            hidden={tab !== 'components'}>
-                            <Components
-                              portalContainer={componentsPortalContainer}
-                            />
-                          </div>
-                          <div
-                            className={styles.TabContent}
-                            hidden={tab !== 'profiler'}>
-                            <Profiler
-                              portalContainer={profilerPortalContainer}
-                            />
                           </div>
-                        </div>
+                        </ThemeProvider>
                       </SchedulingProfilerContextController>
                     </ProfilerContextController>
                   </TreeContextController>
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index ce4e68628f71..a433ac220ffe 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -55,6 +55,8 @@ type Context = {|
   theme: Theme,
   setTheme(value: Theme): void,
 
+  browserTheme: Theme,
+
   traceUpdatesEnabled: boolean,
   setTraceUpdatesEnabled: (value: boolean) => void,
 |};
@@ -198,6 +200,7 @@ function SettingsContextController({
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
       theme,
+      browserTheme,
       traceUpdatesEnabled,
     }),
     [
@@ -214,6 +217,7 @@ function SettingsContextController({
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
       theme,
+      browserTheme,
       traceUpdatesEnabled,
     ],
   );
@@ -251,26 +255,6 @@ export function updateDisplayDensity(
   displayDensity: DisplayDensity,
   documentElements: DocumentElements,
 ): void {
-  updateStyleHelper(
-    displayDensity,
-    'font-size-monospace-normal',
-    documentElements,
-  );
-  updateStyleHelper(
-    displayDensity,
-    'font-size-monospace-large',
-    documentElements,
-  );
-  updateStyleHelper(
-    displayDensity,
-    'font-size-monospace-small',
-    documentElements,
-  );
-  updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);
-  updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
-  updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
-  updateStyleHelper(displayDensity, 'line-height-data', documentElements);
-
   // Sizes and paddings/margins are all rem-based,
   // so update the root font-size as well when the display preference changes.
   const computedStyle = getComputedStyle((document.body: any));
@@ -285,304 +269,6 @@ export function updateThemeVariables(
   theme: Theme,
   documentElements: DocumentElements,
 ): void {
-  updateStyleHelper(theme, 'color-attribute-name', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-attribute-name-not-editable',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
-  updateStyleHelper(theme, 'color-attribute-value', documentElements);
-  updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);
-  updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
-  updateStyleHelper(theme, 'color-background', documentElements);
-  updateStyleHelper(theme, 'color-background-hover', documentElements);
-  updateStyleHelper(theme, 'color-background-inactive', documentElements);
-  updateStyleHelper(theme, 'color-background-invalid', documentElements);
-  updateStyleHelper(theme, 'color-background-selected', documentElements);
-  updateStyleHelper(theme, 'color-border', documentElements);
-  updateStyleHelper(theme, 'color-button-background', documentElements);
-  updateStyleHelper(theme, 'color-button-background-focus', documentElements);
-  updateStyleHelper(theme, 'color-button', documentElements);
-  updateStyleHelper(theme, 'color-button-active', documentElements);
-  updateStyleHelper(theme, 'color-button-disabled', documentElements);
-  updateStyleHelper(theme, 'color-button-focus', documentElements);
-  updateStyleHelper(theme, 'color-button-hover', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-commit-did-not-render-fill',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-commit-did-not-render-fill-text',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-commit-did-not-render-pattern',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-commit-did-not-render-pattern-text',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-3', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-4', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-5', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-6', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-7', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-8', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-9', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-text', documentElements);
-  updateStyleHelper(theme, 'color-component-name', documentElements);
-  updateStyleHelper(theme, 'color-component-name-inverted', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-component-badge-background',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-component-badge-background-inverted',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-component-badge-count', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-component-badge-count-inverted',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-console-error-badge-text', documentElements);
-  updateStyleHelper(theme, 'color-console-error-background', documentElements);
-  updateStyleHelper(theme, 'color-console-error-border', documentElements);
-  updateStyleHelper(theme, 'color-console-error-icon', documentElements);
-  updateStyleHelper(theme, 'color-console-error-text', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-console-warning-badge-text',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-console-warning-background',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-console-warning-border', documentElements);
-  updateStyleHelper(theme, 'color-console-warning-icon', documentElements);
-  updateStyleHelper(theme, 'color-console-warning-text', documentElements);
-  updateStyleHelper(theme, 'color-context-border', documentElements);
-  updateStyleHelper(theme, 'color-context-background', documentElements);
-  updateStyleHelper(theme, 'color-context-background-hover', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-context-background-selected',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-context-border', documentElements);
-  updateStyleHelper(theme, 'color-context-text', documentElements);
-  updateStyleHelper(theme, 'color-context-text-selected', documentElements);
-  updateStyleHelper(theme, 'color-dim', documentElements);
-  updateStyleHelper(theme, 'color-dimmer', documentElements);
-  updateStyleHelper(theme, 'color-dimmest', documentElements);
-  updateStyleHelper(theme, 'color-error-background', documentElements);
-  updateStyleHelper(theme, 'color-error-border', documentElements);
-  updateStyleHelper(theme, 'color-error-text', documentElements);
-  updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-link', documentElements);
-  updateStyleHelper(theme, 'color-modal-background', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-bridge-version-npm-background',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-bridge-version-npm-text', documentElements);
-  updateStyleHelper(theme, 'color-bridge-version-number', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-primitive-hook-badge-background',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-primitive-hook-badge-text', documentElements);
-  updateStyleHelper(theme, 'color-record-active', documentElements);
-  updateStyleHelper(theme, 'color-record-hover', documentElements);
-  updateStyleHelper(theme, 'color-record-inactive', documentElements);
-  updateStyleHelper(theme, 'color-resize-bar', documentElements);
-  updateStyleHelper(theme, 'color-resize-bar-active', documentElements);
-  updateStyleHelper(theme, 'color-resize-bar-border', documentElements);
-  updateStyleHelper(theme, 'color-resize-bar-dot', documentElements);
-  updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
-  updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
-  updateStyleHelper(theme, 'color-search-match', documentElements);
-  updateStyleHelper(theme, 'color-search-match-current', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-text-color',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-selected-tree-highlight-active',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-selected-tree-highlight-inactive',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-priority-background',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-priority-border',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-user-timing',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-user-timing-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-idle',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-idle-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-render',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-render-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-commit',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-commit-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-layout-effects',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-layout-effects-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-passive-effects',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-passive-effects-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-schedule',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-schedule-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-rejected-event',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-rejected-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-resolved',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-resolved-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-unresolved',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-unresolved-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-work-border',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-scroll-caret', documentElements);
-  updateStyleHelper(theme, 'color-shadow', documentElements);
-  updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
-  updateStyleHelper(theme, 'color-text', documentElements);
-  updateStyleHelper(theme, 'color-text-invalid', documentElements);
-  updateStyleHelper(theme, 'color-text-selected', documentElements);
-  updateStyleHelper(theme, 'color-toggle-background-invalid', documentElements);
-  updateStyleHelper(theme, 'color-toggle-background-on', documentElements);
-  updateStyleHelper(theme, 'color-toggle-background-off', documentElements);
-  updateStyleHelper(theme, 'color-toggle-text', documentElements);
-  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
-  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
-  updateStyleHelper(theme, 'color-warning-background', documentElements);
-  updateStyleHelper(theme, 'color-warning-background-hover', documentElements);
-  updateStyleHelper(theme, 'color-warning-text-color', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-warning-text-color-inverted',
-    documentElements,
-  );
-
-  // Font smoothing varies based on the theme.
-  updateStyleHelper(theme, 'font-smoothing', documentElements);
-
   // Update scrollbar color to match theme.
   // this CSS property is currently only supported in Firefox,
   // but it makes a significant UI improvement in dark mode.
@@ -591,6 +277,12 @@ export function updateThemeVariables(
     // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
     documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
   });
+
+  // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
+  // Because Portals render in a different DOM subtree, these variables don't propagate.
+  // So we need to also set @reach/tooltip specific styles on the root.
+  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
+  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 }
 
 export {SettingsContext, SettingsContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
new file mode 100644
index 000000000000..4418e57e4843
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -0,0 +1,301 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {useContext, useMemo} from 'react';
+import {SettingsContext} from './Settings/SettingsContext';
+
+const styles = {
+  light: {
+    '--color-attribute-name': '#ef6632',
+    '--color-attribute-name-not-editable': '#23272f',
+    '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-attribute-value': '#1a1aa6',
+    '--color-attribute-value-inverted': '#ffffff',
+    '--color-attribute-editable-value': '#1a1aa6',
+    '--color-background': '#ffffff',
+    '--color-background-hover': 'rgba(0, 136, 250, 0.1)',
+    '--color-background-inactive': '#e5e5e5',
+    '--color-background-invalid': '#fff0f0',
+    '--color-background-selected': '#0088fa',
+    '--color-button-background': '#ffffff',
+    '--color-button-background-focus': '#ededed',
+    '--color-button': '#5f6673',
+    '--color-button-disabled': '#cfd1d5',
+    '--color-button-active': '#0088fa',
+    '--color-button-focus': '#23272f',
+    '--color-button-hover': '#23272f',
+    '--color-border': '#eeeeee',
+    '--color-commit-did-not-render-fill': '#cfd1d5',
+    '--color-commit-did-not-render-fill-text': '#000000',
+    '--color-commit-did-not-render-pattern': '#cfd1d5',
+    '--color-commit-did-not-render-pattern-text': '#333333',
+    '--color-commit-gradient-0': '#37afa9',
+    '--color-commit-gradient-1': '#63b19e',
+    '--color-commit-gradient-2': '#80b393',
+    '--color-commit-gradient-3': '#97b488',
+    '--color-commit-gradient-4': '#abb67d',
+    '--color-commit-gradient-5': '#beb771',
+    '--color-commit-gradient-6': '#cfb965',
+    '--color-commit-gradient-7': '#dfba57',
+    '--color-commit-gradient-8': '#efbb49',
+    '--color-commit-gradient-9': '#febc38',
+    '--color-commit-gradient-text': '#000000',
+    '--color-component-name': '#6a51b2',
+    '--color-component-name-inverted': '#ffffff',
+    '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',
+    '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
+    '--color-component-badge-count': '#777d88',
+    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-console-error-badge-text': '#ffffff',
+    '--color-console-error-background': '#fff0f0',
+    '--color-console-error-border': '#ffd6d6',
+    '--color-console-error-icon': '#eb3941',
+    '--color-console-error-text': '#fe2e31',
+    '--color-console-warning-badge-text': '#000000',
+    '--color-console-warning-background': '#fffbe5',
+    '--color-console-warning-border': '#fff5c1',
+    '--color-console-warning-icon': '#f4bd00',
+    '--color-console-warning-text': '#64460c',
+    '--color-context-background': 'rgba(0,0,0,.9)',
+    '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
+    '--color-context-background-selected': '#178fb9',
+    '--color-context-border': '#3d424a',
+    '--color-context-text': '#ffffff',
+    '--color-context-text-selected': '#ffffff',
+    '--color-dim': '#777d88',
+    '--color-dimmer': '#cfd1d5',
+    '--color-dimmest': '#eff0f1',
+    '--color-error-background': 'hsl(0, 100%, 97%)',
+    '--color-error-border': 'hsl(0, 100%, 92%)',
+    '--color-error-text': '#ff0000',
+    '--color-expand-collapse-toggle': '#777d88',
+    '--color-link': '#0000ff',
+    '--color-modal-background': 'rgba(255, 255, 255, 0.75)',
+    '--color-bridge-version-npm-background': '#eff0f1',
+    '--color-bridge-version-npm-text': '#000000',
+    '--color-bridge-version-number': '#0088fa',
+    '--color-primitive-hook-badge-background': '#e5e5e5',
+    '--color-primitive-hook-badge-text': '#5f6673',
+    '--color-record-active': '#fc3a4b',
+    '--color-record-hover': '#3578e5',
+    '--color-record-inactive': '#0088fa',
+    '--color-resize-bar': '#cccccc',
+    '--color-scheduling-profiler-native-event': '#ccc',
+    '--color-scheduling-profiler-native-event-hover': '#aaa',
+    '--color-scheduling-profiler-native-event-warning': '#ee1638',
+    '--color-scheduling-profiler-native-event-warning-hover': '#da1030',
+    '--color-scheduling-profiler-native-event-warning-text': '#fff',
+    '--color-scheduling-profiler-priority-background': '#f6f6f6',
+    '--color-scheduling-profiler-priority-border': '#eeeeee',
+    '--color-scheduling-profiler-user-timing': '#c9cacd',
+    '--color-scheduling-profiler-user-timing-hover': '#93959a',
+    '--color-scheduling-profiler-react-idle': '#edf6ff',
+    '--color-scheduling-profiler-react-idle-selected': '#EDF6FF',
+    '--color-scheduling-profiler-react-idle-hover': '#EDF6FF',
+    '--color-scheduling-profiler-react-render': '#9fc3f3',
+    '--color-scheduling-profiler-react-render-selected': '#64A9F5',
+    '--color-scheduling-profiler-react-render-hover': '#2683E2',
+    '--color-scheduling-profiler-react-commit': '#ff718e',
+    '--color-scheduling-profiler-react-commit-selected': '#FF5277',
+    '--color-scheduling-profiler-react-commit-hover': '#ed0030',
+    '--color-scheduling-profiler-react-layout-effects': '#c88ff0',
+    '--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
+    '--color-scheduling-profiler-react-layout-effects-hover': '#601593',
+    '--color-scheduling-profiler-react-passive-effects': '#c88ff0',
+    '--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
+    '--color-scheduling-profiler-react-passive-effects-hover': '#601593',
+    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
+    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
+    '--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
+    '--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
+    '--color-scheduling-profiler-react-suspend': '#a6e59f',
+    '--color-scheduling-profiler-react-suspend-hover': '#13bc00',
+    '--light-color-scheduling-profiler-text-color': '#000000',
+    '--color-scheduling-profiler-react-work-border': '#ffffff',
+    '--color-scroll-thumb': '#c2c2c2',
+    '--color-scroll-track': '#fafafa',
+    '--color-search-match': 'yellow',
+    '--color-search-match-current': '#f7923b',
+    '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
+    '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
+    '--color-shadow': 'rgba(0, 0, 0, 0.25)',
+    '--color-tab-selected-border': '#0088fa',
+    '--color-text': '#000000',
+    '--color-text-invalid': '#ff0000',
+    '--color-text-selected': '#ffffff',
+    '--color-toggle-background-invalid': '#fc3a4b',
+    '--color-toggle-background-on': '#0088fa',
+    '--color-toggle-background-off': '#cfd1d5',
+    '--color-toggle-text': '#ffffff',
+    '--color-tooltip-background': 'rgba(0, 0, 0, 0.95)',
+    '--color-tooltip-text': '#ffffff',
+    '--font-smoothing': 'auto',
+  },
+  dark: {
+    '--color-attribute-name': '#9d87d2',
+    '--color-attribute-name-not-editable': '#ededed',
+    '--color-attribute-name-inverted': '#282828',
+    '--color-attribute-value': '#cedae0',
+    '--color-attribute-value-inverted': '#ffffff',
+    '--color-attribute-editable-value': 'yellow',
+    '--color-background': '#282c34',
+    '--color-background-hover': 'rgba(255, 255, 255, 0.1)',
+    '--color-background-inactive': '#3d424a',
+    '--color-background-invalid': '#5c0000',
+    '--color-background-selected': '#178fb9',
+    '--color-button-background': '#282c34',
+    '--color-button-background-focus': '#3d424a',
+    '--color-button': '#afb3b9',
+    '--color-button-active': '#61dafb',
+    '--color-button-disabled': '#4f5766',
+    '--color-button-focus': '#a2e9fc',
+    '--color-button-hover': '#ededed',
+    '--color-border': '#3d424a',
+    '--color-commit-did-not-render-fill': '#777d88',
+    '--color-commit-did-not-render-fill-text': '#000000',
+    '--color-commit-did-not-render-pattern': '#666c77',
+    '--color-commit-did-not-render-pattern-text': '#ffffff',
+    '--color-commit-gradient-0': '#37afa9',
+    '--color-commit-gradient-1': '#63b19e',
+    '--color-commit-gradient-2': '#80b393',
+    '--color-commit-gradient-3': '#97b488',
+    '--color-commit-gradient-4': '#abb67d',
+    '--color-commit-gradient-5': '#beb771',
+    '--color-commit-gradient-6': '#cfb965',
+    '--color-commit-gradient-7': '#dfba57',
+    '--color-commit-gradient-8': '#efbb49',
+    '--color-commit-gradient-9': '#febc38',
+    '--color-commit-gradient-text': '#000000',
+    '--color-component-name': '#61dafb',
+    '--color-component-name-inverted': '#282828',
+    '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
+    '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
+    '--color-component-badge-count': '#8f949d',
+    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-console-error-badge-text': '#000000',
+    '--color-console-error-background': '#290000',
+    '--color-console-error-border': '#5c0000',
+    '--color-console-error-icon': '#eb3941',
+    '--color-console-error-text': '#fc7f7f',
+    '--color-console-warning-badge-text': '#000000',
+    '--color-console-warning-background': '#332b00',
+    '--color-console-warning-border': '#665500',
+    '--color-console-warning-icon': '#f4bd00',
+    '--color-console-warning-text': '#f5f2ed',
+    '--color-context-background': 'rgba(255,255,255,.95)',
+    '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
+    '--color-context-background-selected': '#0088fa',
+    '--color-context-border': '#eeeeee',
+    '--color-context-text': '#000000',
+    '--color-context-text-selected': '#ffffff',
+    '--color-dim': '#8f949d',
+    '--color-dimmer': '#777d88',
+    '--color-dimmest': '#4f5766',
+    '--color-error-background': '#200',
+    '--color-error-border': '#900',
+    '--color-error-text': '#f55',
+    '--color-expand-collapse-toggle': '#8f949d',
+    '--color-link': '#61dafb',
+    '--color-modal-background': 'rgba(0, 0, 0, 0.75)',
+    '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
+    '--color-bridge-version-npm-text': '#ffffff',
+    '--color-bridge-version-number': 'yellow',
+    '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
+    '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
+    '--color-record-active': '#fc3a4b',
+    '--color-record-hover': '#a2e9fc',
+    '--color-record-inactive': '#61dafb',
+    '--color-resize-bar': '#3d424a',
+    '--color-scheduling-profiler-native-event': '#b2b2b2',
+    '--color-scheduling-profiler-native-event-hover': '#949494',
+    '--color-scheduling-profiler-native-event-warning': '#ee1638',
+    '--color-scheduling-profiler-native-event-warning-hover': '#da1030',
+    '--color-scheduling-profiler-native-event-warning-text': '#fff',
+    '--color-scheduling-profiler-priority-background': '#1d2129',
+    '--color-scheduling-profiler-priority-border': '#282c34',
+    '--color-scheduling-profiler-user-timing': '#c9cacd',
+    '--color-scheduling-profiler-user-timing-hover': '#93959a',
+    '--color-scheduling-profiler-react-idle': '#3d485b',
+    '--color-scheduling-profiler-react-idle-selected': '#465269',
+    '--color-scheduling-profiler-react-idle-hover': '#465269',
+    '--color-scheduling-profiler-react-render': '#9fc3f3',
+    '--color-scheduling-profiler-react-render-selected': '#64A9F5',
+    '--color-scheduling-profiler-react-render-hover': '#2683E2',
+    '--color-scheduling-profiler-react-commit': '#ff718e',
+    '--color-scheduling-profiler-react-commit-selected': '#FF5277',
+    '--color-scheduling-profiler-react-commit-hover': '#ed0030',
+    '--color-scheduling-profiler-react-layout-effects': '#c88ff0',
+    '--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
+    '--color-scheduling-profiler-react-layout-effects-hover': '#601593',
+    '--color-scheduling-profiler-react-passive-effects': '#c88ff0',
+    '--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
+    '--color-scheduling-profiler-react-passive-effects-hover': '#601593',
+    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
+    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
+    '--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
+    '--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
+    '--color-scheduling-profiler-react-suspend': '#a6e59f',
+    '--color-scheduling-profiler-react-suspend-hover': '#13bc00',
+    '--color-scheduling-profiler-text-color': '#000000',
+    '--color-scheduling-profiler-react-work-border': '#ffffff',
+    '--color-scroll-thumb': '#afb3b9',
+    '--color-scroll-track': '#313640',
+    '--color-search-match': 'yellow',
+    '--color-search-match-current': '#f7923b',
+    '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
+    '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
+    '--color-shadow': 'rgba(0, 0, 0, 0.5)',
+    '--color-tab-selected-border': '#178fb9',
+    '--color-text': '#ffffff',
+    '--color-text-invalid': '#ff8080',
+    '--color-text-selected': '#ffffff',
+    '--color-toggle-background-invalid': '#fc3a4b',
+    '--color-toggle-background-on': '#178fb9',
+    '--color-toggle-background-off': '#777d88',
+    '--color-toggle-text': '#ffffff',
+    '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
+    '--color-tooltip-text': '#000000',
+    '--font-smoothing': 'antialiased',
+  },
+  compact: {
+    '--font-size-monospace-small': '9px',
+    '--font-size-monospace-normal': '11px',
+    '--font-size-monospace-large': '15px',
+    '--font-size-sans-small': '10px',
+    '--font-size-sans-normal': '12px',
+    '--font-size-sans-large': '14px',
+    '--line-height-data': '18px',
+  },
+  comfortable: {
+    '--font-size-monospace-small': '10px',
+    '--font-size-monospace-normal': '13px',
+    '--font-size-monospace-large': '17px',
+    '--font-size-sans-small': '12px',
+    '--font-size-sans-normal': '14px',
+    '--font-size-sans-large': '16px',
+    '--line-height-data': '22px',
+  },
+};
+
+export default function ThemeProvider({children}) {
+  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+
+  const style = useMemo(
+    () => ({
+      width: '100%',
+      height: '100%',
+      ...styles[displayDensity],
+      ...styles[theme === 'auto' ? browserTheme : theme],
+    }),
+    [theme, browserTheme, displayDensity],
+  );
+
+  return <div style={style}>{children}</div>;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/portaledContent.js b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
index 4d7cdde32c95..81d0df11008c 100644
--- a/packages/react-devtools-shared/src/devtools/views/portaledContent.js
+++ b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
@@ -12,6 +12,7 @@ import {useContext} from 'react';
 import {createPortal} from 'react-dom';
 import ErrorBoundary from './ErrorBoundary';
 import {StoreContext} from './context';
+import ThemeProvider from './ThemeProvider';
 
 export type Props = {portalContainer?: Element, ...};
 
@@ -28,7 +29,7 @@ export default function portaledContent(
     );
 
     return portalContainer != null
-      ? createPortal(children, portalContainer)
+      ? createPortal(<ThemeProvider>{children}</ThemeProvider>, portalContainer)
       : children;
   };
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index e35a1c646787..c6c7ffd586e7 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -1,283 +1,25 @@
 :root {
-  /**
-   * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()
-   */
 
   /* Light theme */
-  --light-color-attribute-name: #ef6632;
-  --light-color-attribute-name-not-editable: #23272f;
-  --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
-  --light-color-attribute-value: #1a1aa6;
-  --light-color-attribute-value-inverted: #ffffff;
-  --light-color-attribute-editable-value: #1a1aa6;
-  --light-color-background: #ffffff;
-  --light-color-background-hover: rgba(0, 136, 250, 0.1);
-  --light-color-background-inactive: #e5e5e5;
-  --light-color-background-invalid: #fff0f0;
-  --light-color-background-selected: #0088fa;
-  --light-color-button-background: #ffffff;
-  --light-color-button-background-focus: #ededed;
-  --light-color-button: #5f6673;
-  --light-color-button-disabled: #cfd1d5;
-  --light-color-button-active: #0088fa;
-  --light-color-button-focus: #23272f;
-  --light-color-button-hover: #23272f;
-  --light-color-border: #eeeeee;
-  --light-color-commit-did-not-render-fill: #cfd1d5;
-  --light-color-commit-did-not-render-fill-text: #000000;
-  --light-color-commit-did-not-render-pattern: #cfd1d5;
-  --light-color-commit-did-not-render-pattern-text: #333333;
-  --light-color-commit-gradient-0: #37afa9;
-  --light-color-commit-gradient-1: #63b19e;
-  --light-color-commit-gradient-2: #80b393;
-  --light-color-commit-gradient-3: #97b488;
-  --light-color-commit-gradient-4: #abb67d;
-  --light-color-commit-gradient-5: #beb771;
-  --light-color-commit-gradient-6: #cfb965;
-  --light-color-commit-gradient-7: #dfba57;
-  --light-color-commit-gradient-8: #efbb49;
-  --light-color-commit-gradient-9: #febc38;
-  --light-color-commit-gradient-text: #000000;
-  --light-color-component-name: #6a51b2;
-  --light-color-component-name-inverted: #ffffff;
-  --light-color-component-badge-background: rgba(0, 0, 0, 0.1);
-  --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
-  --light-color-component-badge-count: #777d88;
-  --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
-  --light-color-console-error-badge-text: #ffffff;
-  --light-color-console-error-background: #fff0f0;
-  --light-color-console-error-border: #ffd6d6;
-  --light-color-console-error-icon: #eb3941;
-  --light-color-console-error-text: #fe2e31;
-  --light-color-console-warning-badge-text: #000000;
-  --light-color-console-warning-background: #fffbe5;
-  --light-color-console-warning-border: #fff5c1;
-  --light-color-console-warning-icon: #f4bd00;
-  --light-color-console-warning-text: #64460c;
-  --light-color-context-background: rgba(0,0,0,.9);
-  --light-color-context-background-hover: rgba(255, 255, 255, 0.1);
-  --light-color-context-background-selected: #178fb9;
-  --light-color-context-border: #3d424a;
-  --light-color-context-text: #ffffff;
-  --light-color-context-text-selected: #ffffff;
-  --light-color-dim: #777d88;
-  --light-color-dimmer: #cfd1d5;
-  --light-color-dimmest: #eff0f1;
-  --light-color-error-background: hsl(0, 100%, 97%);
-  --light-color-error-border: hsl(0, 100%, 92%);
-  --light-color-error-text: #ff0000;
-  --light-color-expand-collapse-toggle: #777d88;
-  --light-color-link: #0000ff;
-  --light-color-modal-background: rgba(255, 255, 255, 0.75);
-  --light-color-bridge-version-npm-background: #eff0f1;
-  --light-color-bridge-version-npm-text: #000000;
-  --light-color-bridge-version-number: #0088fa;
-  --light-color-primitive-hook-badge-background: #e5e5e5;
-  --light-color-primitive-hook-badge-text: #5f6673;
-  --light-color-record-active: #fc3a4b;
-  --light-color-record-hover: #3578e5;
-  --light-color-record-inactive: #0088fa;
-  --light-color-resize-bar: #eeeeee;
-  --light-color-resize-bar-active: #dcdcdc;
-  --light-color-resize-bar-border: #d1d1d1;
-  --light-color-resize-bar-dot: #333333;
-  --light-color-scheduling-profiler-native-event: #ccc;
-  --light-color-scheduling-profiler-native-event-hover: #aaa;
-  --light-color-scheduling-profiler-priority-background: #f6f6f6;
-  --light-color-scheduling-profiler-priority-border: #eeeeee;
-  --light-color-scheduling-profiler-user-timing: #c9cacd;
-  --light-color-scheduling-profiler-user-timing-hover: #93959a;
-  --light-color-scheduling-profiler-react-idle: #d3e5f6;
-  --light-color-scheduling-profiler-react-idle-hover: #c3d9ef;
-  --light-color-scheduling-profiler-react-render: #9fc3f3;
-  --light-color-scheduling-profiler-react-render-hover: #83afe9;
-  --light-color-scheduling-profiler-react-commit: #c88ff0;
-  --light-color-scheduling-profiler-react-commit-hover: #b281d6;
-  --light-color-scheduling-profiler-react-layout-effects: #b281d6;
-  --light-color-scheduling-profiler-react-layout-effects-hover: #9d71bd;
-  --light-color-scheduling-profiler-react-passive-effects: #b281d6;
-  --light-color-scheduling-profiler-react-passive-effects-hover: #9d71bd;
-  --light-color-scheduling-profiler-react-schedule: #9fc3f3;
-  --light-color-scheduling-profiler-react-schedule-hover: #2683E2;
-  --light-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
-  --light-color-scheduling-profiler-react-suspense-rejected-hover: #ffdf37;
-  --light-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
-  --light-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
-  --light-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
-  --light-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
-  --light-color-scheduling-profiler-text-color: #000000;
-  --light-color-scheduling-profiler-react-work-border: #ffffff;
   --light-color-scroll-thumb: #c2c2c2;
   --light-color-scroll-track: #fafafa;
-  --light-color-search-match: yellow;
-  --light-color-search-match-current: #f7923b;
-  --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
-  --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
-  --light-color-scroll-caret: rgba(150, 150, 150, 0.5);
-  --light-color-tab-selected-border: #0088fa;
-  --light-color-text: #000000;
-  --light-color-text-invalid: #ff0000;
-  --light-color-text-selected: #ffffff;
-  --light-color-toggle-background-invalid: #fc3a4b;
-  --light-color-toggle-background-on: #0088fa;
-  --light-color-toggle-background-off: #cfd1d5;
-  --light-color-toggle-text: #ffffff;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
-  --light-color-warning-background: #fb3655;
-  --light-color-warning-background-hover: #f82042;
-  --light-color-warning-text-color: #ffffff;
-  --light-color-warning-text-color-inverted: #fd4d69;
 
   /* Dark theme */
-  --dark-color-attribute-name: #9d87d2;
-  --dark-color-attribute-name-not-editable: #ededed;
-  --dark-color-attribute-name-inverted: #282828;
-  --dark-color-attribute-value: #cedae0;
-  --dark-color-attribute-value-inverted: #ffffff;
-  --dark-color-attribute-editable-value: yellow;
-  --dark-color-background: #282c34;
-  --dark-color-background-hover: rgba(255, 255, 255, 0.1);
-  --dark-color-background-inactive: #3d424a;
-  --dark-color-background-invalid: #5c0000;
-  --dark-color-background-selected: #178fb9;
-  --dark-color-button-background: #282c34;
-  --dark-color-button-background-focus: #3d424a;
-  --dark-color-button: #afb3b9;
-  --dark-color-button-active: #61dafb;
-  --dark-color-button-disabled: #4f5766;
-  --dark-color-button-focus: #a2e9fc;
-  --dark-color-button-hover: #ededed;
-  --dark-color-border: #3d424a;
-  --dark-color-commit-did-not-render-fill: #777d88;
-  --dark-color-commit-did-not-render-fill-text: #000000;
-  --dark-color-commit-did-not-render-pattern: #666c77;
-  --dark-color-commit-did-not-render-pattern-text: #ffffff;
-  --dark-color-commit-gradient-0: #37afa9;
-  --dark-color-commit-gradient-1: #63b19e;
-  --dark-color-commit-gradient-2: #80b393;
-  --dark-color-commit-gradient-3: #97b488;
-  --dark-color-commit-gradient-4: #abb67d;
-  --dark-color-commit-gradient-5: #beb771;
-  --dark-color-commit-gradient-6: #cfb965;
-  --dark-color-commit-gradient-7: #dfba57;
-  --dark-color-commit-gradient-8: #efbb49;
-  --dark-color-commit-gradient-9: #febc38;
-  --dark-color-commit-gradient-text: #000000;
-  --dark-color-component-name: #61dafb;
-  --dark-color-component-name-inverted: #282828;
-  --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
-  --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
-  --dark-color-component-badge-count: #8f949d;
-  --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
-  --dark-color-console-error-badge-text: #000000;
-  --dark-color-console-error-background: #290000;
-  --dark-color-console-error-border: #5c0000;
-  --dark-color-console-error-icon: #eb3941;
-  --dark-color-console-error-text: #fc7f7f;
-  --dark-color-console-warning-badge-text: #000000;
-  --dark-color-console-warning-background: #332b00;
-  --dark-color-console-warning-border: #665500;
-  --dark-color-console-warning-icon: #f4bd00;
-  --dark-color-console-warning-text: #f5f2ed;
-  --dark-color-context-background: rgba(255,255,255,.95);
-  --dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
-  --dark-color-context-background-selected: #0088fa;
-  --dark-color-context-border: #eeeeee;
-  --dark-color-context-text: #000000;
-  --dark-color-context-text-selected: #ffffff;
-  --dark-color-dim: #8f949d;
-  --dark-color-dimmer: #777d88;
-  --dark-color-dimmest: #4f5766;
-  --dark-color-error-background: #200;
-  --dark-color-error-border: #900;
-  --dark-color-error-text: #f55;
-  --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-link: #61dafb;
-  --dark-color-modal-background: rgba(0, 0, 0, 0.75);
-  --dark-color-bridge-version-npm-background: rgba(0, 0, 0, 0.25);
-  --dark-color-bridge-version-npm-text: #ffffff;
-  --dark-color-bridge-version-number: yellow;
-  --dark-color-primitive-hook-badge-background: rgba(0, 0, 0, 0.25);
-  --dark-color-primitive-hook-badge-text: rgba(255, 255, 255, 0.7);
-  --dark-color-record-active: #fc3a4b;
-  --dark-color-record-hover: #a2e9fc;
-  --dark-color-record-inactive: #61dafb;
-  --dark-color-resize-bar: #282c34;
-  --dark-color-resize-bar-active: #31363f;
-  --dark-color-resize-bar-border: #3d424a;
-  --dark-color-resize-bar-dot: #cfd1d5;
-  --dark-color-scheduling-profiler-native-event: #b2b2b2;
-  --dark-color-scheduling-profiler-native-event-hover: #949494;
-  --dark-color-scheduling-profiler-priority-background: #1d2129;
-  --dark-color-scheduling-profiler-priority-border: #282c34;
-  --dark-color-scheduling-profiler-user-timing: #c9cacd;
-  --dark-color-scheduling-profiler-user-timing-hover: #93959a;
-  --dark-color-scheduling-profiler-react-idle: #3d485b;
-  --dark-color-scheduling-profiler-react-idle-hover: #465269;
-  --dark-color-scheduling-profiler-react-render: #2683E2;
-  --dark-color-scheduling-profiler-react-render-hover: #1a76d4;
-  --dark-color-scheduling-profiler-react-commit: #731fad;
-  --dark-color-scheduling-profiler-react-commit-hover: #611b94;
-  --dark-color-scheduling-profiler-react-layout-effects: #611b94;
-  --dark-color-scheduling-profiler-react-layout-effects-hover: #51167a;
-  --dark-color-scheduling-profiler-react-passive-effects: #611b94;
-  --dark-color-scheduling-profiler-react-passive-effects-hover: #51167a;
-  --dark-color-scheduling-profiler-react-schedule: #2683E2;
-  --dark-color-scheduling-profiler-react-schedule-hover: #1a76d4;
-  --dark-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
-  --dark-color-scheduling-profiler-react-suspense-rejected-hover: #e4c00f;
-  --dark-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
-  --dark-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
-  --dark-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
-  --dark-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
-  --dark-color-scheduling-profiler-text-color: #000000;
-  --dark-color-scheduling-profiler-react-work-border: #ffffff;
   --dark-color-scroll-thumb: #afb3b9;
   --dark-color-scroll-track: #313640;
-  --dark-color-search-match: yellow;
-  --dark-color-search-match-current: #f7923b;
-  --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
-  --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
-  --dark-color-scroll-caret: #4f5766;
-  --dark-color-shadow: rgba(0, 0, 0, 0.5);
-  --dark-color-tab-selected-border: #178fb9;
-  --dark-color-text: #ffffff;
-  --dark-color-text-invalid: #ff8080;
-  --dark-color-text-selected: #ffffff;
-  --dark-color-toggle-background-invalid: #fc3a4b;
-  --dark-color-toggle-background-on: #178fb9;
-  --dark-color-toggle-background-off: #777d88;
-  --dark-color-toggle-text: #ffffff;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
   --dark-color-tooltip-text: #000000;
-  --dark-color-warning-background: #ee1638;
-  --dark-color-warning-background-hover: #da1030;
-  --dark-color-warning-text-color: #ffffff;
-  --dark-color-warning-text-color-inverted: #ee1638;
 
   /* Font smoothing */
-  --light-font-smoothing: auto;
-  --dark-font-smoothing: antialiased;
   --font-smoothing: auto;
 
   /* Compact density */
-  --compact-font-size-monospace-small: 9px;
-  --compact-font-size-monospace-normal: 11px;
-  --compact-font-size-monospace-large: 15px;
-  --compact-font-size-sans-small: 10px;
-  --compact-font-size-sans-normal: 12px;
-  --compact-font-size-sans-large: 14px;
   --compact-line-height-data: 18px;
   --compact-root-font-size: 16px;
 
   /* Comfortable density */
-  --comfortable-font-size-monospace-small: 10px;
-  --comfortable-font-size-monospace-normal: 13px;
-  --comfortable-font-size-monospace-large: 17px;
-  --comfortable-font-size-sans-small: 12px;
-  --comfortable-font-size-sans-normal: 14px;
-  --comfortable-font-size-sans-large: 16px;
   --comfortable-line-height-data: 22px;
   --comfortable-root-font-size: 20px;
 
@@ -286,4 +28,4 @@
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-}
+}
\ No newline at end of file

From 055d5386822720b8ded7aed0d6f4407e6f19469e Mon Sep 17 00:00:00 2001
From: Houssem Chebab <houssemchebeb@gmail.com>
Date: Tue, 27 Jul 2021 06:43:52 +0100
Subject: [PATCH 2/8] Fix flow types errors

---
 .../src/devtools/views/ThemeProvider.js                      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
index 4418e57e4843..a93076d30c97 100644
--- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -10,8 +10,9 @@
 import * as React from 'react';
 import {useContext, useMemo} from 'react';
 import {SettingsContext} from './Settings/SettingsContext';
+import type {Theme, DisplayDensity} from './Settings/SettingsContext';
 
-const styles = {
+const styles: {[style: Theme | DisplayDensity]: any} = {
   light: {
     '--color-attribute-name': '#ef6632',
     '--color-attribute-name-not-editable': '#23272f',
@@ -284,7 +285,7 @@ const styles = {
   },
 };
 
-export default function ThemeProvider({children}) {
+export default function ThemeProvider({children}: {|children: React$Node|}) {
   const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
 
   const style = useMemo(

From 03394deccee485a6a67a643d82897e46d5e709ce Mon Sep 17 00:00:00 2001
From: Houssem Chebab <houssemchebeb@gmail.com>
Date: Wed, 28 Jul 2021 20:18:34 +0100
Subject: [PATCH 3/8] Add comment for re-wrapping portaled content in a second
 ThemeProvider

---
 .../src/devtools/views/portaledContent.js             | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/portaledContent.js b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
index 81d0df11008c..b95fa6e22c09 100644
--- a/packages/react-devtools-shared/src/devtools/views/portaledContent.js
+++ b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
@@ -22,14 +22,21 @@ export default function portaledContent(
   return function PortaledContent({portalContainer, ...rest}: Props) {
     const store = useContext(StoreContext);
 
-    const children = (
+    let children = (
       <ErrorBoundary store={store}>
         <Component {...rest} />
       </ErrorBoundary>
     );
 
+    if (portalContainer != null) {
+      // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
+      // Because Portals render in a different DOM subtree, these variables don't propagate.
+      // So in this case, we need to re-wrap portaled content in a second ThemeProvider.
+      children = <ThemeProvider>{children}</ThemeProvider>;
+    }
+
     return portalContainer != null
-      ? createPortal(<ThemeProvider>{children}</ThemeProvider>, portalContainer)
+      ? createPortal(children, portalContainer)
       : children;
   };
 }

From 4d6f3a42ce42045eb98a0ba7307cd37889eb6057 Mon Sep 17 00:00:00 2001
From: Houssem Chebab <houssemchebeb@gmail.com>
Date: Wed, 28 Jul 2021 21:51:26 +0100
Subject: [PATCH 4/8] Export ThemeProvider styles and update line height hack

---
 .../react-devtools-shared/src/constants.js    | 27 +++----------------
 .../src/devtools/views/ThemeProvider.js       |  2 +-
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 10750fa7d773..2d7f614c923d 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -57,31 +57,10 @@ export const REACT_DEVTOOLS_WORKPLACE_URL =
 
 // HACK
 //
-// Extracting during build time avoids a temporarily invalid state for the inline target.
 // Sometimes the inline target is rendered before root styles are applied,
 // which would result in e.g. NaN itemSize being passed to react-window list.
-//
-let COMFORTABLE_LINE_HEIGHT;
-let COMPACT_LINE_HEIGHT;
-
-try {
-  // $FlowFixMe
-  const rawStyleString = require('!!raw-loader!react-devtools-shared/src/devtools/views/root.css')
-    .default;
-
-  const extractVar = varName => {
-    const regExp = new RegExp(`${varName}: ([0-9]+)`);
-    const match = rawStyleString.match(regExp);
-    return parseInt(match[1], 10);
-  };
-
-  COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data');
-  COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
-} catch (error) {
-  // We can't use the Webpack loader syntax in the context of Jest,
-  // so tests need some reasonably meaningful fallback value.
-  COMFORTABLE_LINE_HEIGHT = 15;
-  COMPACT_LINE_HEIGHT = 10;
-}
+const {styles} = require ('react-devtools-shared/src/devtools/views/ThemeProvider');
+const COMFORTABLE_LINE_HEIGHT = parseInt(styles.comfortable['--line-height-data'], 10);
+const COMPACT_LINE_HEIGHT = parseInt(styles.compact['--line-height-data'], 10);
 
 export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
index a93076d30c97..ffd3e291401b 100644
--- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -12,7 +12,7 @@ import {useContext, useMemo} from 'react';
 import {SettingsContext} from './Settings/SettingsContext';
 import type {Theme, DisplayDensity} from './Settings/SettingsContext';
 
-const styles: {[style: Theme | DisplayDensity]: any} = {
+export const styles: {[style: Theme | DisplayDensity]: any} = {
   light: {
     '--color-attribute-name': '#ef6632',
     '--color-attribute-name-not-editable': '#23272f',

From 79ef81d9c780a1138f2c6c59a09e0555d2bfa451 Mon Sep 17 00:00:00 2001
From: Houssem Chebab <houssemchebeb@gmail.com>
Date: Wed, 28 Jul 2021 22:12:00 +0100
Subject: [PATCH 5/8] Format code with prettier

---
 packages/react-devtools-shared/src/constants.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 2d7f614c923d..d0054a8b8964 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -59,8 +59,13 @@ export const REACT_DEVTOOLS_WORKPLACE_URL =
 //
 // Sometimes the inline target is rendered before root styles are applied,
 // which would result in e.g. NaN itemSize being passed to react-window list.
-const {styles} = require ('react-devtools-shared/src/devtools/views/ThemeProvider');
-const COMFORTABLE_LINE_HEIGHT = parseInt(styles.comfortable['--line-height-data'], 10);
+const {
+  styles,
+} = require('react-devtools-shared/src/devtools/views/ThemeProvider');
+const COMFORTABLE_LINE_HEIGHT = parseInt(
+  styles.comfortable['--line-height-data'],
+  10,
+);
 const COMPACT_LINE_HEIGHT = parseInt(styles.compact['--line-height-data'], 10);
 
 export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};

From 6522e176cdeab65666dc15bb6ac0d5af03762e45 Mon Sep 17 00:00:00 2001
From: Houssem Chebab <houssemchebeb@gmail.com>
Date: Sun, 1 Aug 2021 17:45:30 +0100
Subject: [PATCH 6/8] Move styles to constants.js

---
 .../react-devtools-shared/src/constants.js    | 288 +++++++++++++++++-
 .../src/devtools/views/ThemeProvider.js       | 279 +----------------
 2 files changed, 286 insertions(+), 281 deletions(-)

diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index d0054a8b8964..2ac8a704c286 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -55,17 +55,295 @@ export const UNSUPPORTED_VERSION_URL =
 export const REACT_DEVTOOLS_WORKPLACE_URL =
   'https://fburl.com/react-devtools-workplace-group';
 
+import type {
+  Theme,
+  DisplayDensity,
+} from './devtools/views/Settings/SettingsContext';
+
+export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
+  light: {
+    '--color-attribute-name': '#ef6632',
+    '--color-attribute-name-not-editable': '#23272f',
+    '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-attribute-value': '#1a1aa6',
+    '--color-attribute-value-inverted': '#ffffff',
+    '--color-attribute-editable-value': '#1a1aa6',
+    '--color-background': '#ffffff',
+    '--color-background-hover': 'rgba(0, 136, 250, 0.1)',
+    '--color-background-inactive': '#e5e5e5',
+    '--color-background-invalid': '#fff0f0',
+    '--color-background-selected': '#0088fa',
+    '--color-button-background': '#ffffff',
+    '--color-button-background-focus': '#ededed',
+    '--color-button': '#5f6673',
+    '--color-button-disabled': '#cfd1d5',
+    '--color-button-active': '#0088fa',
+    '--color-button-focus': '#23272f',
+    '--color-button-hover': '#23272f',
+    '--color-border': '#eeeeee',
+    '--color-commit-did-not-render-fill': '#cfd1d5',
+    '--color-commit-did-not-render-fill-text': '#000000',
+    '--color-commit-did-not-render-pattern': '#cfd1d5',
+    '--color-commit-did-not-render-pattern-text': '#333333',
+    '--color-commit-gradient-0': '#37afa9',
+    '--color-commit-gradient-1': '#63b19e',
+    '--color-commit-gradient-2': '#80b393',
+    '--color-commit-gradient-3': '#97b488',
+    '--color-commit-gradient-4': '#abb67d',
+    '--color-commit-gradient-5': '#beb771',
+    '--color-commit-gradient-6': '#cfb965',
+    '--color-commit-gradient-7': '#dfba57',
+    '--color-commit-gradient-8': '#efbb49',
+    '--color-commit-gradient-9': '#febc38',
+    '--color-commit-gradient-text': '#000000',
+    '--color-component-name': '#6a51b2',
+    '--color-component-name-inverted': '#ffffff',
+    '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',
+    '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
+    '--color-component-badge-count': '#777d88',
+    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-console-error-badge-text': '#ffffff',
+    '--color-console-error-background': '#fff0f0',
+    '--color-console-error-border': '#ffd6d6',
+    '--color-console-error-icon': '#eb3941',
+    '--color-console-error-text': '#fe2e31',
+    '--color-console-warning-badge-text': '#000000',
+    '--color-console-warning-background': '#fffbe5',
+    '--color-console-warning-border': '#fff5c1',
+    '--color-console-warning-icon': '#f4bd00',
+    '--color-console-warning-text': '#64460c',
+    '--color-context-background': 'rgba(0,0,0,.9)',
+    '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
+    '--color-context-background-selected': '#178fb9',
+    '--color-context-border': '#3d424a',
+    '--color-context-text': '#ffffff',
+    '--color-context-text-selected': '#ffffff',
+    '--color-dim': '#777d88',
+    '--color-dimmer': '#cfd1d5',
+    '--color-dimmest': '#eff0f1',
+    '--color-error-background': 'hsl(0, 100%, 97%)',
+    '--color-error-border': 'hsl(0, 100%, 92%)',
+    '--color-error-text': '#ff0000',
+    '--color-expand-collapse-toggle': '#777d88',
+    '--color-link': '#0000ff',
+    '--color-modal-background': 'rgba(255, 255, 255, 0.75)',
+    '--color-bridge-version-npm-background': '#eff0f1',
+    '--color-bridge-version-npm-text': '#000000',
+    '--color-bridge-version-number': '#0088fa',
+    '--color-primitive-hook-badge-background': '#e5e5e5',
+    '--color-primitive-hook-badge-text': '#5f6673',
+    '--color-record-active': '#fc3a4b',
+    '--color-record-hover': '#3578e5',
+    '--color-record-inactive': '#0088fa',
+    '--color-resize-bar': '#cccccc',
+    '--color-scheduling-profiler-native-event': '#ccc',
+    '--color-scheduling-profiler-native-event-hover': '#aaa',
+    '--color-scheduling-profiler-native-event-warning': '#ee1638',
+    '--color-scheduling-profiler-native-event-warning-hover': '#da1030',
+    '--color-scheduling-profiler-native-event-warning-text': '#fff',
+    '--color-scheduling-profiler-priority-background': '#f6f6f6',
+    '--color-scheduling-profiler-priority-border': '#eeeeee',
+    '--color-scheduling-profiler-user-timing': '#c9cacd',
+    '--color-scheduling-profiler-user-timing-hover': '#93959a',
+    '--color-scheduling-profiler-react-idle': '#edf6ff',
+    '--color-scheduling-profiler-react-idle-selected': '#EDF6FF',
+    '--color-scheduling-profiler-react-idle-hover': '#EDF6FF',
+    '--color-scheduling-profiler-react-render': '#9fc3f3',
+    '--color-scheduling-profiler-react-render-selected': '#64A9F5',
+    '--color-scheduling-profiler-react-render-hover': '#2683E2',
+    '--color-scheduling-profiler-react-commit': '#ff718e',
+    '--color-scheduling-profiler-react-commit-selected': '#FF5277',
+    '--color-scheduling-profiler-react-commit-hover': '#ed0030',
+    '--color-scheduling-profiler-react-layout-effects': '#c88ff0',
+    '--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
+    '--color-scheduling-profiler-react-layout-effects-hover': '#601593',
+    '--color-scheduling-profiler-react-passive-effects': '#c88ff0',
+    '--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
+    '--color-scheduling-profiler-react-passive-effects-hover': '#601593',
+    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
+    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
+    '--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
+    '--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
+    '--color-scheduling-profiler-react-suspend': '#a6e59f',
+    '--color-scheduling-profiler-react-suspend-hover': '#13bc00',
+    '--light-color-scheduling-profiler-text-color': '#000000',
+    '--color-scheduling-profiler-react-work-border': '#ffffff',
+    '--color-scroll-thumb': '#c2c2c2',
+    '--color-scroll-track': '#fafafa',
+    '--color-search-match': 'yellow',
+    '--color-search-match-current': '#f7923b',
+    '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
+    '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
+    '--color-shadow': 'rgba(0, 0, 0, 0.25)',
+    '--color-tab-selected-border': '#0088fa',
+    '--color-text': '#000000',
+    '--color-text-invalid': '#ff0000',
+    '--color-text-selected': '#ffffff',
+    '--color-toggle-background-invalid': '#fc3a4b',
+    '--color-toggle-background-on': '#0088fa',
+    '--color-toggle-background-off': '#cfd1d5',
+    '--color-toggle-text': '#ffffff',
+    '--color-tooltip-background': 'rgba(0, 0, 0, 0.95)',
+    '--color-tooltip-text': '#ffffff',
+    '--font-smoothing': 'auto',
+  },
+  dark: {
+    '--color-attribute-name': '#9d87d2',
+    '--color-attribute-name-not-editable': '#ededed',
+    '--color-attribute-name-inverted': '#282828',
+    '--color-attribute-value': '#cedae0',
+    '--color-attribute-value-inverted': '#ffffff',
+    '--color-attribute-editable-value': 'yellow',
+    '--color-background': '#282c34',
+    '--color-background-hover': 'rgba(255, 255, 255, 0.1)',
+    '--color-background-inactive': '#3d424a',
+    '--color-background-invalid': '#5c0000',
+    '--color-background-selected': '#178fb9',
+    '--color-button-background': '#282c34',
+    '--color-button-background-focus': '#3d424a',
+    '--color-button': '#afb3b9',
+    '--color-button-active': '#61dafb',
+    '--color-button-disabled': '#4f5766',
+    '--color-button-focus': '#a2e9fc',
+    '--color-button-hover': '#ededed',
+    '--color-border': '#3d424a',
+    '--color-commit-did-not-render-fill': '#777d88',
+    '--color-commit-did-not-render-fill-text': '#000000',
+    '--color-commit-did-not-render-pattern': '#666c77',
+    '--color-commit-did-not-render-pattern-text': '#ffffff',
+    '--color-commit-gradient-0': '#37afa9',
+    '--color-commit-gradient-1': '#63b19e',
+    '--color-commit-gradient-2': '#80b393',
+    '--color-commit-gradient-3': '#97b488',
+    '--color-commit-gradient-4': '#abb67d',
+    '--color-commit-gradient-5': '#beb771',
+    '--color-commit-gradient-6': '#cfb965',
+    '--color-commit-gradient-7': '#dfba57',
+    '--color-commit-gradient-8': '#efbb49',
+    '--color-commit-gradient-9': '#febc38',
+    '--color-commit-gradient-text': '#000000',
+    '--color-component-name': '#61dafb',
+    '--color-component-name-inverted': '#282828',
+    '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
+    '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
+    '--color-component-badge-count': '#8f949d',
+    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-console-error-badge-text': '#000000',
+    '--color-console-error-background': '#290000',
+    '--color-console-error-border': '#5c0000',
+    '--color-console-error-icon': '#eb3941',
+    '--color-console-error-text': '#fc7f7f',
+    '--color-console-warning-badge-text': '#000000',
+    '--color-console-warning-background': '#332b00',
+    '--color-console-warning-border': '#665500',
+    '--color-console-warning-icon': '#f4bd00',
+    '--color-console-warning-text': '#f5f2ed',
+    '--color-context-background': 'rgba(255,255,255,.95)',
+    '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
+    '--color-context-background-selected': '#0088fa',
+    '--color-context-border': '#eeeeee',
+    '--color-context-text': '#000000',
+    '--color-context-text-selected': '#ffffff',
+    '--color-dim': '#8f949d',
+    '--color-dimmer': '#777d88',
+    '--color-dimmest': '#4f5766',
+    '--color-error-background': '#200',
+    '--color-error-border': '#900',
+    '--color-error-text': '#f55',
+    '--color-expand-collapse-toggle': '#8f949d',
+    '--color-link': '#61dafb',
+    '--color-modal-background': 'rgba(0, 0, 0, 0.75)',
+    '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
+    '--color-bridge-version-npm-text': '#ffffff',
+    '--color-bridge-version-number': 'yellow',
+    '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
+    '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
+    '--color-record-active': '#fc3a4b',
+    '--color-record-hover': '#a2e9fc',
+    '--color-record-inactive': '#61dafb',
+    '--color-resize-bar': '#3d424a',
+    '--color-scheduling-profiler-native-event': '#b2b2b2',
+    '--color-scheduling-profiler-native-event-hover': '#949494',
+    '--color-scheduling-profiler-native-event-warning': '#ee1638',
+    '--color-scheduling-profiler-native-event-warning-hover': '#da1030',
+    '--color-scheduling-profiler-native-event-warning-text': '#fff',
+    '--color-scheduling-profiler-priority-background': '#1d2129',
+    '--color-scheduling-profiler-priority-border': '#282c34',
+    '--color-scheduling-profiler-user-timing': '#c9cacd',
+    '--color-scheduling-profiler-user-timing-hover': '#93959a',
+    '--color-scheduling-profiler-react-idle': '#3d485b',
+    '--color-scheduling-profiler-react-idle-selected': '#465269',
+    '--color-scheduling-profiler-react-idle-hover': '#465269',
+    '--color-scheduling-profiler-react-render': '#9fc3f3',
+    '--color-scheduling-profiler-react-render-selected': '#64A9F5',
+    '--color-scheduling-profiler-react-render-hover': '#2683E2',
+    '--color-scheduling-profiler-react-commit': '#ff718e',
+    '--color-scheduling-profiler-react-commit-selected': '#FF5277',
+    '--color-scheduling-profiler-react-commit-hover': '#ed0030',
+    '--color-scheduling-profiler-react-layout-effects': '#c88ff0',
+    '--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
+    '--color-scheduling-profiler-react-layout-effects-hover': '#601593',
+    '--color-scheduling-profiler-react-passive-effects': '#c88ff0',
+    '--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
+    '--color-scheduling-profiler-react-passive-effects-hover': '#601593',
+    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
+    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
+    '--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
+    '--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
+    '--color-scheduling-profiler-react-suspend': '#a6e59f',
+    '--color-scheduling-profiler-react-suspend-hover': '#13bc00',
+    '--color-scheduling-profiler-text-color': '#000000',
+    '--color-scheduling-profiler-react-work-border': '#ffffff',
+    '--color-scroll-thumb': '#afb3b9',
+    '--color-scroll-track': '#313640',
+    '--color-search-match': 'yellow',
+    '--color-search-match-current': '#f7923b',
+    '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
+    '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
+    '--color-shadow': 'rgba(0, 0, 0, 0.5)',
+    '--color-tab-selected-border': '#178fb9',
+    '--color-text': '#ffffff',
+    '--color-text-invalid': '#ff8080',
+    '--color-text-selected': '#ffffff',
+    '--color-toggle-background-invalid': '#fc3a4b',
+    '--color-toggle-background-on': '#178fb9',
+    '--color-toggle-background-off': '#777d88',
+    '--color-toggle-text': '#ffffff',
+    '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
+    '--color-tooltip-text': '#000000',
+    '--font-smoothing': 'antialiased',
+  },
+  compact: {
+    '--font-size-monospace-small': '9px',
+    '--font-size-monospace-normal': '11px',
+    '--font-size-monospace-large': '15px',
+    '--font-size-sans-small': '10px',
+    '--font-size-sans-normal': '12px',
+    '--font-size-sans-large': '14px',
+    '--line-height-data': '18px',
+  },
+  comfortable: {
+    '--font-size-monospace-small': '10px',
+    '--font-size-monospace-normal': '13px',
+    '--font-size-monospace-large': '17px',
+    '--font-size-sans-small': '12px',
+    '--font-size-sans-normal': '14px',
+    '--font-size-sans-large': '16px',
+    '--line-height-data': '22px',
+  },
+};
+
 // HACK
 //
 // Sometimes the inline target is rendered before root styles are applied,
 // which would result in e.g. NaN itemSize being passed to react-window list.
-const {
-  styles,
-} = require('react-devtools-shared/src/devtools/views/ThemeProvider');
 const COMFORTABLE_LINE_HEIGHT = parseInt(
-  styles.comfortable['--line-height-data'],
+  THEME_STYLES.comfortable['--line-height-data'],
+  10,
+);
+const COMPACT_LINE_HEIGHT = parseInt(
+  THEME_STYLES.compact['--line-height-data'],
   10,
 );
-const COMPACT_LINE_HEIGHT = parseInt(styles.compact['--line-height-data'], 10);
 
 export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
index ffd3e291401b..8fb93469ad4a 100644
--- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -10,280 +10,7 @@
 import * as React from 'react';
 import {useContext, useMemo} from 'react';
 import {SettingsContext} from './Settings/SettingsContext';
-import type {Theme, DisplayDensity} from './Settings/SettingsContext';
-
-export const styles: {[style: Theme | DisplayDensity]: any} = {
-  light: {
-    '--color-attribute-name': '#ef6632',
-    '--color-attribute-name-not-editable': '#23272f',
-    '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
-    '--color-attribute-value': '#1a1aa6',
-    '--color-attribute-value-inverted': '#ffffff',
-    '--color-attribute-editable-value': '#1a1aa6',
-    '--color-background': '#ffffff',
-    '--color-background-hover': 'rgba(0, 136, 250, 0.1)',
-    '--color-background-inactive': '#e5e5e5',
-    '--color-background-invalid': '#fff0f0',
-    '--color-background-selected': '#0088fa',
-    '--color-button-background': '#ffffff',
-    '--color-button-background-focus': '#ededed',
-    '--color-button': '#5f6673',
-    '--color-button-disabled': '#cfd1d5',
-    '--color-button-active': '#0088fa',
-    '--color-button-focus': '#23272f',
-    '--color-button-hover': '#23272f',
-    '--color-border': '#eeeeee',
-    '--color-commit-did-not-render-fill': '#cfd1d5',
-    '--color-commit-did-not-render-fill-text': '#000000',
-    '--color-commit-did-not-render-pattern': '#cfd1d5',
-    '--color-commit-did-not-render-pattern-text': '#333333',
-    '--color-commit-gradient-0': '#37afa9',
-    '--color-commit-gradient-1': '#63b19e',
-    '--color-commit-gradient-2': '#80b393',
-    '--color-commit-gradient-3': '#97b488',
-    '--color-commit-gradient-4': '#abb67d',
-    '--color-commit-gradient-5': '#beb771',
-    '--color-commit-gradient-6': '#cfb965',
-    '--color-commit-gradient-7': '#dfba57',
-    '--color-commit-gradient-8': '#efbb49',
-    '--color-commit-gradient-9': '#febc38',
-    '--color-commit-gradient-text': '#000000',
-    '--color-component-name': '#6a51b2',
-    '--color-component-name-inverted': '#ffffff',
-    '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',
-    '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
-    '--color-component-badge-count': '#777d88',
-    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
-    '--color-console-error-badge-text': '#ffffff',
-    '--color-console-error-background': '#fff0f0',
-    '--color-console-error-border': '#ffd6d6',
-    '--color-console-error-icon': '#eb3941',
-    '--color-console-error-text': '#fe2e31',
-    '--color-console-warning-badge-text': '#000000',
-    '--color-console-warning-background': '#fffbe5',
-    '--color-console-warning-border': '#fff5c1',
-    '--color-console-warning-icon': '#f4bd00',
-    '--color-console-warning-text': '#64460c',
-    '--color-context-background': 'rgba(0,0,0,.9)',
-    '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
-    '--color-context-background-selected': '#178fb9',
-    '--color-context-border': '#3d424a',
-    '--color-context-text': '#ffffff',
-    '--color-context-text-selected': '#ffffff',
-    '--color-dim': '#777d88',
-    '--color-dimmer': '#cfd1d5',
-    '--color-dimmest': '#eff0f1',
-    '--color-error-background': 'hsl(0, 100%, 97%)',
-    '--color-error-border': 'hsl(0, 100%, 92%)',
-    '--color-error-text': '#ff0000',
-    '--color-expand-collapse-toggle': '#777d88',
-    '--color-link': '#0000ff',
-    '--color-modal-background': 'rgba(255, 255, 255, 0.75)',
-    '--color-bridge-version-npm-background': '#eff0f1',
-    '--color-bridge-version-npm-text': '#000000',
-    '--color-bridge-version-number': '#0088fa',
-    '--color-primitive-hook-badge-background': '#e5e5e5',
-    '--color-primitive-hook-badge-text': '#5f6673',
-    '--color-record-active': '#fc3a4b',
-    '--color-record-hover': '#3578e5',
-    '--color-record-inactive': '#0088fa',
-    '--color-resize-bar': '#cccccc',
-    '--color-scheduling-profiler-native-event': '#ccc',
-    '--color-scheduling-profiler-native-event-hover': '#aaa',
-    '--color-scheduling-profiler-native-event-warning': '#ee1638',
-    '--color-scheduling-profiler-native-event-warning-hover': '#da1030',
-    '--color-scheduling-profiler-native-event-warning-text': '#fff',
-    '--color-scheduling-profiler-priority-background': '#f6f6f6',
-    '--color-scheduling-profiler-priority-border': '#eeeeee',
-    '--color-scheduling-profiler-user-timing': '#c9cacd',
-    '--color-scheduling-profiler-user-timing-hover': '#93959a',
-    '--color-scheduling-profiler-react-idle': '#edf6ff',
-    '--color-scheduling-profiler-react-idle-selected': '#EDF6FF',
-    '--color-scheduling-profiler-react-idle-hover': '#EDF6FF',
-    '--color-scheduling-profiler-react-render': '#9fc3f3',
-    '--color-scheduling-profiler-react-render-selected': '#64A9F5',
-    '--color-scheduling-profiler-react-render-hover': '#2683E2',
-    '--color-scheduling-profiler-react-commit': '#ff718e',
-    '--color-scheduling-profiler-react-commit-selected': '#FF5277',
-    '--color-scheduling-profiler-react-commit-hover': '#ed0030',
-    '--color-scheduling-profiler-react-layout-effects': '#c88ff0',
-    '--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
-    '--color-scheduling-profiler-react-layout-effects-hover': '#601593',
-    '--color-scheduling-profiler-react-passive-effects': '#c88ff0',
-    '--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
-    '--color-scheduling-profiler-react-passive-effects-hover': '#601593',
-    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
-    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
-    '--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
-    '--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
-    '--color-scheduling-profiler-react-suspend': '#a6e59f',
-    '--color-scheduling-profiler-react-suspend-hover': '#13bc00',
-    '--light-color-scheduling-profiler-text-color': '#000000',
-    '--color-scheduling-profiler-react-work-border': '#ffffff',
-    '--color-scroll-thumb': '#c2c2c2',
-    '--color-scroll-track': '#fafafa',
-    '--color-search-match': 'yellow',
-    '--color-search-match-current': '#f7923b',
-    '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
-    '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
-    '--color-shadow': 'rgba(0, 0, 0, 0.25)',
-    '--color-tab-selected-border': '#0088fa',
-    '--color-text': '#000000',
-    '--color-text-invalid': '#ff0000',
-    '--color-text-selected': '#ffffff',
-    '--color-toggle-background-invalid': '#fc3a4b',
-    '--color-toggle-background-on': '#0088fa',
-    '--color-toggle-background-off': '#cfd1d5',
-    '--color-toggle-text': '#ffffff',
-    '--color-tooltip-background': 'rgba(0, 0, 0, 0.95)',
-    '--color-tooltip-text': '#ffffff',
-    '--font-smoothing': 'auto',
-  },
-  dark: {
-    '--color-attribute-name': '#9d87d2',
-    '--color-attribute-name-not-editable': '#ededed',
-    '--color-attribute-name-inverted': '#282828',
-    '--color-attribute-value': '#cedae0',
-    '--color-attribute-value-inverted': '#ffffff',
-    '--color-attribute-editable-value': 'yellow',
-    '--color-background': '#282c34',
-    '--color-background-hover': 'rgba(255, 255, 255, 0.1)',
-    '--color-background-inactive': '#3d424a',
-    '--color-background-invalid': '#5c0000',
-    '--color-background-selected': '#178fb9',
-    '--color-button-background': '#282c34',
-    '--color-button-background-focus': '#3d424a',
-    '--color-button': '#afb3b9',
-    '--color-button-active': '#61dafb',
-    '--color-button-disabled': '#4f5766',
-    '--color-button-focus': '#a2e9fc',
-    '--color-button-hover': '#ededed',
-    '--color-border': '#3d424a',
-    '--color-commit-did-not-render-fill': '#777d88',
-    '--color-commit-did-not-render-fill-text': '#000000',
-    '--color-commit-did-not-render-pattern': '#666c77',
-    '--color-commit-did-not-render-pattern-text': '#ffffff',
-    '--color-commit-gradient-0': '#37afa9',
-    '--color-commit-gradient-1': '#63b19e',
-    '--color-commit-gradient-2': '#80b393',
-    '--color-commit-gradient-3': '#97b488',
-    '--color-commit-gradient-4': '#abb67d',
-    '--color-commit-gradient-5': '#beb771',
-    '--color-commit-gradient-6': '#cfb965',
-    '--color-commit-gradient-7': '#dfba57',
-    '--color-commit-gradient-8': '#efbb49',
-    '--color-commit-gradient-9': '#febc38',
-    '--color-commit-gradient-text': '#000000',
-    '--color-component-name': '#61dafb',
-    '--color-component-name-inverted': '#282828',
-    '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
-    '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
-    '--color-component-badge-count': '#8f949d',
-    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
-    '--color-console-error-badge-text': '#000000',
-    '--color-console-error-background': '#290000',
-    '--color-console-error-border': '#5c0000',
-    '--color-console-error-icon': '#eb3941',
-    '--color-console-error-text': '#fc7f7f',
-    '--color-console-warning-badge-text': '#000000',
-    '--color-console-warning-background': '#332b00',
-    '--color-console-warning-border': '#665500',
-    '--color-console-warning-icon': '#f4bd00',
-    '--color-console-warning-text': '#f5f2ed',
-    '--color-context-background': 'rgba(255,255,255,.95)',
-    '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
-    '--color-context-background-selected': '#0088fa',
-    '--color-context-border': '#eeeeee',
-    '--color-context-text': '#000000',
-    '--color-context-text-selected': '#ffffff',
-    '--color-dim': '#8f949d',
-    '--color-dimmer': '#777d88',
-    '--color-dimmest': '#4f5766',
-    '--color-error-background': '#200',
-    '--color-error-border': '#900',
-    '--color-error-text': '#f55',
-    '--color-expand-collapse-toggle': '#8f949d',
-    '--color-link': '#61dafb',
-    '--color-modal-background': 'rgba(0, 0, 0, 0.75)',
-    '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
-    '--color-bridge-version-npm-text': '#ffffff',
-    '--color-bridge-version-number': 'yellow',
-    '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
-    '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
-    '--color-record-active': '#fc3a4b',
-    '--color-record-hover': '#a2e9fc',
-    '--color-record-inactive': '#61dafb',
-    '--color-resize-bar': '#3d424a',
-    '--color-scheduling-profiler-native-event': '#b2b2b2',
-    '--color-scheduling-profiler-native-event-hover': '#949494',
-    '--color-scheduling-profiler-native-event-warning': '#ee1638',
-    '--color-scheduling-profiler-native-event-warning-hover': '#da1030',
-    '--color-scheduling-profiler-native-event-warning-text': '#fff',
-    '--color-scheduling-profiler-priority-background': '#1d2129',
-    '--color-scheduling-profiler-priority-border': '#282c34',
-    '--color-scheduling-profiler-user-timing': '#c9cacd',
-    '--color-scheduling-profiler-user-timing-hover': '#93959a',
-    '--color-scheduling-profiler-react-idle': '#3d485b',
-    '--color-scheduling-profiler-react-idle-selected': '#465269',
-    '--color-scheduling-profiler-react-idle-hover': '#465269',
-    '--color-scheduling-profiler-react-render': '#9fc3f3',
-    '--color-scheduling-profiler-react-render-selected': '#64A9F5',
-    '--color-scheduling-profiler-react-render-hover': '#2683E2',
-    '--color-scheduling-profiler-react-commit': '#ff718e',
-    '--color-scheduling-profiler-react-commit-selected': '#FF5277',
-    '--color-scheduling-profiler-react-commit-hover': '#ed0030',
-    '--color-scheduling-profiler-react-layout-effects': '#c88ff0',
-    '--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
-    '--color-scheduling-profiler-react-layout-effects-hover': '#601593',
-    '--color-scheduling-profiler-react-passive-effects': '#c88ff0',
-    '--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
-    '--color-scheduling-profiler-react-passive-effects-hover': '#601593',
-    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
-    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
-    '--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
-    '--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
-    '--color-scheduling-profiler-react-suspend': '#a6e59f',
-    '--color-scheduling-profiler-react-suspend-hover': '#13bc00',
-    '--color-scheduling-profiler-text-color': '#000000',
-    '--color-scheduling-profiler-react-work-border': '#ffffff',
-    '--color-scroll-thumb': '#afb3b9',
-    '--color-scroll-track': '#313640',
-    '--color-search-match': 'yellow',
-    '--color-search-match-current': '#f7923b',
-    '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
-    '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
-    '--color-shadow': 'rgba(0, 0, 0, 0.5)',
-    '--color-tab-selected-border': '#178fb9',
-    '--color-text': '#ffffff',
-    '--color-text-invalid': '#ff8080',
-    '--color-text-selected': '#ffffff',
-    '--color-toggle-background-invalid': '#fc3a4b',
-    '--color-toggle-background-on': '#178fb9',
-    '--color-toggle-background-off': '#777d88',
-    '--color-toggle-text': '#ffffff',
-    '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
-    '--color-tooltip-text': '#000000',
-    '--font-smoothing': 'antialiased',
-  },
-  compact: {
-    '--font-size-monospace-small': '9px',
-    '--font-size-monospace-normal': '11px',
-    '--font-size-monospace-large': '15px',
-    '--font-size-sans-small': '10px',
-    '--font-size-sans-normal': '12px',
-    '--font-size-sans-large': '14px',
-    '--line-height-data': '18px',
-  },
-  comfortable: {
-    '--font-size-monospace-small': '10px',
-    '--font-size-monospace-normal': '13px',
-    '--font-size-monospace-large': '17px',
-    '--font-size-sans-small': '12px',
-    '--font-size-sans-normal': '14px',
-    '--font-size-sans-large': '16px',
-    '--line-height-data': '22px',
-  },
-};
+import {THEME_STYLES} from '../../constants';
 
 export default function ThemeProvider({children}: {|children: React$Node|}) {
   const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
@@ -292,8 +19,8 @@ export default function ThemeProvider({children}: {|children: React$Node|}) {
     () => ({
       width: '100%',
       height: '100%',
-      ...styles[displayDensity],
-      ...styles[theme === 'auto' ? browserTheme : theme],
+      ...THEME_STYLES[displayDensity],
+      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
     }),
     [theme, browserTheme, displayDensity],
   );

From cccb3b5d0acfb859b16b458a4973c1bfd2b2dd67 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 2 Aug 2021 10:09:38 -0400
Subject: [PATCH 7/8] Updated scheduling profiler theme colors

---
 .../react-devtools-shared/src/constants.js    | 101 +++++++++---------
 1 file changed, 51 insertions(+), 50 deletions(-)

diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 2ac8a704c286..1e062b23a641 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -135,38 +135,35 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-record-active': '#fc3a4b',
     '--color-record-hover': '#3578e5',
     '--color-record-inactive': '#0088fa',
-    '--color-resize-bar': '#cccccc',
+    '--color-resize-bar': '#eeeeee',
+    '--color-resize-bar-active': '#dcdcdc',
+    '--color-resize-bar-border': '#d1d1d1',
+    '--color-resize-bar-dot': '#333333',
     '--color-scheduling-profiler-native-event': '#ccc',
     '--color-scheduling-profiler-native-event-hover': '#aaa',
-    '--color-scheduling-profiler-native-event-warning': '#ee1638',
-    '--color-scheduling-profiler-native-event-warning-hover': '#da1030',
-    '--color-scheduling-profiler-native-event-warning-text': '#fff',
     '--color-scheduling-profiler-priority-background': '#f6f6f6',
     '--color-scheduling-profiler-priority-border': '#eeeeee',
     '--color-scheduling-profiler-user-timing': '#c9cacd',
     '--color-scheduling-profiler-user-timing-hover': '#93959a',
-    '--color-scheduling-profiler-react-idle': '#edf6ff',
-    '--color-scheduling-profiler-react-idle-selected': '#EDF6FF',
-    '--color-scheduling-profiler-react-idle-hover': '#EDF6FF',
+    '--color-scheduling-profiler-react-idle': '#d3e5f6',
+    '--color-scheduling-profiler-react-idle-hover': '#c3d9ef',
     '--color-scheduling-profiler-react-render': '#9fc3f3',
-    '--color-scheduling-profiler-react-render-selected': '#64A9F5',
-    '--color-scheduling-profiler-react-render-hover': '#2683E2',
-    '--color-scheduling-profiler-react-commit': '#ff718e',
-    '--color-scheduling-profiler-react-commit-selected': '#FF5277',
-    '--color-scheduling-profiler-react-commit-hover': '#ed0030',
-    '--color-scheduling-profiler-react-layout-effects': '#c88ff0',
-    '--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
-    '--color-scheduling-profiler-react-layout-effects-hover': '#601593',
-    '--color-scheduling-profiler-react-passive-effects': '#c88ff0',
-    '--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
-    '--color-scheduling-profiler-react-passive-effects-hover': '#601593',
+    '--color-scheduling-profiler-react-render-hover': '#83afe9',
+    '--color-scheduling-profiler-react-commit': '#c88ff0',
+    '--color-scheduling-profiler-react-commit-hover': '#b281d6',
+    '--color-scheduling-profiler-react-layout-effects': '#b281d6',
+    '--color-scheduling-profiler-react-layout-effects-hover': '#9d71bd',
+    '--color-scheduling-profiler-react-passive-effects': '#b281d6',
+    '--color-scheduling-profiler-react-passive-effects-hover': '#9d71bd',
     '--color-scheduling-profiler-react-schedule': '#9fc3f3',
     '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
-    '--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
-    '--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
-    '--color-scheduling-profiler-react-suspend': '#a6e59f',
-    '--color-scheduling-profiler-react-suspend-hover': '#13bc00',
-    '--light-color-scheduling-profiler-text-color': '#000000',
+    '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
+    '--color-scheduling-profiler-react-suspense-rejected-hover': '#ffdf37',
+    '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
+    '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
+    '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
+    '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
+    '--color-scheduling-profiler-text-color': '#000000',
     '--color-scheduling-profiler-react-work-border': '#ffffff',
     '--color-scroll-thumb': '#c2c2c2',
     '--color-scroll-track': '#fafafa',
@@ -174,7 +171,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
     '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
-    '--color-shadow': 'rgba(0, 0, 0, 0.25)',
+    '--color-scroll-caret': 'rgba(150, 150, 150, 0.5)',
     '--color-tab-selected-border': '#0088fa',
     '--color-text': '#000000',
     '--color-text-invalid': '#ff0000',
@@ -183,9 +180,12 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-toggle-background-on': '#0088fa',
     '--color-toggle-background-off': '#cfd1d5',
     '--color-toggle-text': '#ffffff',
-    '--color-tooltip-background': 'rgba(0, 0, 0, 0.95)',
+    '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
     '--color-tooltip-text': '#ffffff',
-    '--font-smoothing': 'auto',
+    '--color-warning-background': '#fb3655',
+    '--color-warning-background-hover': '#f82042',
+    '--color-warning-text-color': '#ffffff',
+    '--color-warning-text-color-inverted': '#fd4d69',
   },
   dark: {
     '--color-attribute-name': '#9d87d2',
@@ -261,37 +261,34 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-record-active': '#fc3a4b',
     '--color-record-hover': '#a2e9fc',
     '--color-record-inactive': '#61dafb',
-    '--color-resize-bar': '#3d424a',
+    '--color-resize-bar': '#282c34',
+    '--color-resize-bar-active': '#31363f',
+    '--color-resize-bar-border': '#3d424a',
+    '--color-resize-bar-dot': '#cfd1d5',
     '--color-scheduling-profiler-native-event': '#b2b2b2',
     '--color-scheduling-profiler-native-event-hover': '#949494',
-    '--color-scheduling-profiler-native-event-warning': '#ee1638',
-    '--color-scheduling-profiler-native-event-warning-hover': '#da1030',
-    '--color-scheduling-profiler-native-event-warning-text': '#fff',
     '--color-scheduling-profiler-priority-background': '#1d2129',
     '--color-scheduling-profiler-priority-border': '#282c34',
     '--color-scheduling-profiler-user-timing': '#c9cacd',
     '--color-scheduling-profiler-user-timing-hover': '#93959a',
     '--color-scheduling-profiler-react-idle': '#3d485b',
-    '--color-scheduling-profiler-react-idle-selected': '#465269',
     '--color-scheduling-profiler-react-idle-hover': '#465269',
-    '--color-scheduling-profiler-react-render': '#9fc3f3',
-    '--color-scheduling-profiler-react-render-selected': '#64A9F5',
-    '--color-scheduling-profiler-react-render-hover': '#2683E2',
-    '--color-scheduling-profiler-react-commit': '#ff718e',
-    '--color-scheduling-profiler-react-commit-selected': '#FF5277',
-    '--color-scheduling-profiler-react-commit-hover': '#ed0030',
-    '--color-scheduling-profiler-react-layout-effects': '#c88ff0',
-    '--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
-    '--color-scheduling-profiler-react-layout-effects-hover': '#601593',
-    '--color-scheduling-profiler-react-passive-effects': '#c88ff0',
-    '--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
-    '--color-scheduling-profiler-react-passive-effects-hover': '#601593',
-    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
-    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
-    '--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
-    '--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
-    '--color-scheduling-profiler-react-suspend': '#a6e59f',
-    '--color-scheduling-profiler-react-suspend-hover': '#13bc00',
+    '--color-scheduling-profiler-react-render': '#2683E2',
+    '--color-scheduling-profiler-react-render-hover': '#1a76d4',
+    '--color-scheduling-profiler-react-commit': '#731fad',
+    '--color-scheduling-profiler-react-commit-hover': '#611b94',
+    '--color-scheduling-profiler-react-layout-effects': '#611b94',
+    '--color-scheduling-profiler-react-layout-effects-hover': '#51167a',
+    '--color-scheduling-profiler-react-passive-effects': '#611b94',
+    '--color-scheduling-profiler-react-passive-effects-hover': '#51167a',
+    '--color-scheduling-profiler-react-schedule': '#2683E2',
+    '--color-scheduling-profiler-react-schedule-hover': '#1a76d4',
+    '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
+    '--color-scheduling-profiler-react-suspense-rejected-hover': '#e4c00f',
+    '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
+    '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
+    '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
+    '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
     '--color-scheduling-profiler-text-color': '#000000',
     '--color-scheduling-profiler-react-work-border': '#ffffff',
     '--color-scroll-thumb': '#afb3b9',
@@ -300,6 +297,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
     '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
+    '--color-scroll-caret': '#4f5766',
     '--color-shadow': 'rgba(0, 0, 0, 0.5)',
     '--color-tab-selected-border': '#178fb9',
     '--color-text': '#ffffff',
@@ -311,7 +309,10 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-toggle-text': '#ffffff',
     '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
     '--color-tooltip-text': '#000000',
-    '--font-smoothing': 'antialiased',
+    '--color-warning-background': '#ee1638',
+    '--color-warning-background-hover': '#da1030',
+    '--color-warning-text-color': '#ffffff',
+    '--color-warning-text-color-inverted': '#ee1638',
   },
   compact: {
     '--font-size-monospace-small': '9px',

From c1daa285656da0c2176d81fa8e12ed4b4993da7a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 2 Aug 2021 11:13:51 -0400
Subject: [PATCH 8/8] Udpated scheduling profiler theme code to pull from local
 DIV instead of BODY

---
 .../src/SchedulingProfiler.js                              | 7 +++++--
 .../src/content-views/constants.js                         | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
index c7a7783694fb..760bbeead7d4 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
@@ -15,6 +15,7 @@ import {
   useContext,
   useDeferredValue,
   useLayoutEffect,
+  useRef,
   useState,
 } from 'react';
 import {SettingsContext} from 'react-devtools-shared/src/devtools/views/Settings/SettingsContext';
@@ -30,6 +31,8 @@ export function SchedulingProfiler(_: {||}) {
     SchedulingProfilerContext,
   );
 
+  const ref = useRef(null);
+
   // HACK: Canvas rendering uses an imperative API,
   // but DevTools colors are stored in CSS variables (see root.css and SettingsContext).
   // When the theme changes, we need to trigger update the imperative colors and re-draw the Canvas.
@@ -42,7 +45,7 @@ export function SchedulingProfiler(_: {||}) {
   const [key, setKey] = useState<string>(theme);
   useLayoutEffect(() => {
     const pollForTheme = () => {
-      if (updateColorsToMatchTheme()) {
+      if (updateColorsToMatchTheme(((ref.current: any): HTMLDivElement))) {
         clearInterval(intervalID);
         setKey(deferredTheme);
       }
@@ -56,7 +59,7 @@ export function SchedulingProfiler(_: {||}) {
   }, [deferredTheme]);
 
   return (
-    <div className={styles.Content}>
+    <div className={styles.Content} ref={ref}>
       {schedulingProfilerData ? (
         <Suspense fallback={<ProcessingData />}>
           <DataResourceComponent
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 27ce99a05a11..214cf26d7bfa 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -82,8 +82,8 @@ export let COLORS = {
   WARNING_TEXT_INVERED: '',
 };
 
-export function updateColorsToMatchTheme(): boolean {
-  const computedStyle = getComputedStyle((document.body: any));
+export function updateColorsToMatchTheme(element: Element): boolean {
+  const computedStyle = getComputedStyle(element);
 
   // Check to see if styles have been initialized...
   if (computedStyle.getPropertyValue('--color-background') == null) {