diff --git a/packages/react-devtools-core/src/cachedSettings.js b/packages/react-devtools-core/src/cachedSettings.js
index 945c0cf60a42c..a104cadfb0341 100644
--- a/packages/react-devtools-core/src/cachedSettings.js
+++ b/packages/react-devtools-core/src/cachedSettings.js
@@ -7,10 +7,8 @@
  * @flow
  */
 
-import {
-  type ConsolePatchSettings,
-  writeConsolePatchSettingsToWindow,
-} from 'react-devtools-shared/src/backend/console';
+import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/types';
+import {writeConsolePatchSettingsToWindow} from 'react-devtools-shared/src/backend/console';
 import {castBool, castBrowserTheme} from 'react-devtools-shared/src/utils';
 
 // Note: all keys should be optional in this type, because users can use newer
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index eba5b89be5c39..bf5f9cf0ba21a 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -30,7 +30,7 @@ import {
   __DEBUG__,
   LOCAL_STORAGE_DEFAULT_TAB_KEY,
 } from 'react-devtools-shared/src/constants';
-import {localStorageSetItem} from '../../react-devtools-shared/src/storage';
+import {localStorageSetItem} from 'react-devtools-shared/src/storage';
 
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 95d36f1915e53..1303e2a0c132e 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -6,7 +6,6 @@ import {createRoot} from 'react-dom/client';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {IS_CHROME, IS_EDGE, getBrowserTheme} from './utils';
-import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
 import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
 import {
   getAppendComponentStack,
@@ -21,7 +20,10 @@ import {
   localStorageSetItem,
 } from 'react-devtools-shared/src/storage';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
-import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {
+  __DEBUG__,
+  LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
+} from 'react-devtools-shared/src/constants';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 0b78fce3c22ca..2dfed90734aa5 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -25,7 +25,7 @@ import {
   initialize as setupTraceUpdates,
   toggleEnabled as setTraceUpdatesEnabled,
 } from './views/TraceUpdates';
-import {patch as patchConsole, type ConsolePatchSettings} from './console';
+import {patch as patchConsole} from './console';
 import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
 
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
@@ -37,10 +37,13 @@ import type {
   PathMatch,
   RendererID,
   RendererInterface,
+  ConsolePatchSettings,
 } from './types';
-import type {ComponentFilter} from '../types';
+import type {
+  ComponentFilter,
+  BrowserTheme,
+} from 'react-devtools-shared/src/types';
 import {isSynchronousXHRSupported} from './utils';
-import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const debug = (methodName: string, ...args: Array<string>) => {
   if (__DEBUG__) {
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 27ca30114c090..3b669b218cd68 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -8,8 +8,12 @@
  */
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
-import type {CurrentDispatcherRef, ReactRenderer, WorkTagMap} from './types';
-import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {
+  CurrentDispatcherRef,
+  ReactRenderer,
+  WorkTagMap,
+  ConsolePatchSettings,
+} from './types';
 import {format, formatWithStyles} from './utils';
 
 import {getInternalReactConstants} from './renderer';
@@ -136,7 +140,7 @@ export function registerRenderer(
   }
 }
 
-const consoleSettingsRef = {
+const consoleSettingsRef: ConsolePatchSettings = {
   appendComponentStack: false,
   breakOnConsoleErrors: false,
   showInlineWarningsAndErrors: false,
@@ -144,14 +148,6 @@ const consoleSettingsRef = {
   browserTheme: 'dark',
 };
 
-export type ConsolePatchSettings = {
-  appendComponentStack: boolean,
-  breakOnConsoleErrors: boolean,
-  showInlineWarningsAndErrors: boolean,
-  hideConsoleLogsInStrictMode: boolean,
-  browserTheme: BrowserTheme,
-};
-
 // Patches console methods to append component stack for the current fiber.
 // Call unpatch() to remove the injected behavior.
 export function patch({
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 3bf60b8cb5416..8de4c23dd3f84 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -7,6 +7,13 @@
  * @flow
  */
 
+/**
+ * WARNING:
+ * This file contains types that are conceptually related to React internals and
+ * DevTools backends, but can be passed to frontend via the bridge.
+ * Be mindful of backwards compatibility when making changes.
+ */
+
 import type {ReactContext, Wakeable} from 'shared/ReactTypes';
 import type {Source} from 'shared/ReactElementType';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
@@ -17,6 +24,7 @@ import type {
 } from 'react-devtools-shared/src/types';
 import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 import type {TimelineDataExport} from 'react-devtools-timeline/src/types';
+import type {BrowserTheme} from 'react-devtools-shared/src/types';
 
 type BundleType =
   | 0 // PROD
@@ -492,3 +500,11 @@ export type DevToolsHook = {
 
   ...
 };
+
+export type ConsolePatchSettings = {
+  appendComponentStack: boolean,
+  breakOnConsoleErrors: boolean,
+  showInlineWarningsAndErrors: boolean,
+  hideConsoleLogsInStrictMode: boolean,
+  browserTheme: BrowserTheme,
+};
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index c2dd07d393ea9..c24d65a076e01 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -15,9 +15,9 @@ import type {
   OwnersList,
   ProfilingDataBackend,
   RendererID,
+  ConsolePatchSettings,
 } from 'react-devtools-shared/src/backend/types';
 import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
-import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/console';
 
 const BATCH_DURATION = 100;
 
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index b6d5c5b0e17b3..5c2454a36f909 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -66,342 +66,3 @@ export const LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE =
   'React::DevTools::hideConsoleLogsInStrictMode';
 
 export const PROFILER_EXPORT_VERSION = 5;
-
-export const CHANGE_LOG_URL =
-  'https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md';
-
-export const UNSUPPORTED_VERSION_URL =
-  'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back';
-
-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': '#eeeeee',
-    '--color-resize-bar-active': '#dcdcdc',
-    '--color-resize-bar-border': '#d1d1d1',
-    '--color-resize-bar-dot': '#333333',
-    '--color-timeline-internal-module': '#d1d1d1',
-    '--color-timeline-internal-module-hover': '#c9c9c9',
-    '--color-timeline-internal-module-text': '#444',
-    '--color-timeline-native-event': '#ccc',
-    '--color-timeline-native-event-hover': '#aaa',
-    '--color-timeline-network-primary': '#fcf3dc',
-    '--color-timeline-network-primary-hover': '#f0e7d1',
-    '--color-timeline-network-secondary': '#efc457',
-    '--color-timeline-network-secondary-hover': '#e3ba52',
-    '--color-timeline-priority-background': '#f6f6f6',
-    '--color-timeline-priority-border': '#eeeeee',
-    '--color-timeline-user-timing': '#c9cacd',
-    '--color-timeline-user-timing-hover': '#93959a',
-    '--color-timeline-react-idle': '#d3e5f6',
-    '--color-timeline-react-idle-hover': '#c3d9ef',
-    '--color-timeline-react-render': '#9fc3f3',
-    '--color-timeline-react-render-hover': '#83afe9',
-    '--color-timeline-react-render-text': '#11365e',
-    '--color-timeline-react-commit': '#c88ff0',
-    '--color-timeline-react-commit-hover': '#b281d6',
-    '--color-timeline-react-commit-text': '#3e2c4a',
-    '--color-timeline-react-layout-effects': '#b281d6',
-    '--color-timeline-react-layout-effects-hover': '#9d71bd',
-    '--color-timeline-react-layout-effects-text': '#3e2c4a',
-    '--color-timeline-react-passive-effects': '#b281d6',
-    '--color-timeline-react-passive-effects-hover': '#9d71bd',
-    '--color-timeline-react-passive-effects-text': '#3e2c4a',
-    '--color-timeline-react-schedule': '#9fc3f3',
-    '--color-timeline-react-schedule-hover': '#2683E2',
-    '--color-timeline-react-suspense-rejected': '#f1cc14',
-    '--color-timeline-react-suspense-rejected-hover': '#ffdf37',
-    '--color-timeline-react-suspense-resolved': '#a6e59f',
-    '--color-timeline-react-suspense-resolved-hover': '#89d281',
-    '--color-timeline-react-suspense-unresolved': '#c9cacd',
-    '--color-timeline-react-suspense-unresolved-hover': '#93959a',
-    '--color-timeline-thrown-error': '#ee1638',
-    '--color-timeline-thrown-error-hover': '#da1030',
-    '--color-timeline-text-color': '#000000',
-    '--color-timeline-text-dim-color': '#ccc',
-    '--color-timeline-react-work-border': '#eeeeee',
-    '--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-scroll-caret': 'rgba(150, 150, 150, 0.5)',
-    '--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-warning-background': '#fb3655',
-    '--color-warning-background-hover': '#f82042',
-    '--color-warning-text-color': '#ffffff',
-    '--color-warning-text-color-inverted': '#fd4d69',
-
-    // The styles below should be kept in sync with 'root.css'
-    // They are repeated there because they're used by e.g. tooltips or context menus
-    // which get rendered outside of the DOM subtree (where normal theme/styles are written).
-    '--color-scroll-thumb': '#c2c2c2',
-    '--color-scroll-track': '#fafafa',
-    '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
-    '--color-tooltip-text': '#ffffff',
-  },
-  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': '#282c34',
-    '--color-resize-bar-active': '#31363f',
-    '--color-resize-bar-border': '#3d424a',
-    '--color-resize-bar-dot': '#cfd1d5',
-    '--color-timeline-internal-module': '#303542',
-    '--color-timeline-internal-module-hover': '#363b4a',
-    '--color-timeline-internal-module-text': '#7f8899',
-    '--color-timeline-native-event': '#b2b2b2',
-    '--color-timeline-native-event-hover': '#949494',
-    '--color-timeline-network-primary': '#fcf3dc',
-    '--color-timeline-network-primary-hover': '#e3dbc5',
-    '--color-timeline-network-secondary': '#efc457',
-    '--color-timeline-network-secondary-hover': '#d6af4d',
-    '--color-timeline-priority-background': '#1d2129',
-    '--color-timeline-priority-border': '#282c34',
-    '--color-timeline-user-timing': '#c9cacd',
-    '--color-timeline-user-timing-hover': '#93959a',
-    '--color-timeline-react-idle': '#3d485b',
-    '--color-timeline-react-idle-hover': '#465269',
-    '--color-timeline-react-render': '#2683E2',
-    '--color-timeline-react-render-hover': '#1a76d4',
-    '--color-timeline-react-render-text': '#11365e',
-    '--color-timeline-react-commit': '#731fad',
-    '--color-timeline-react-commit-hover': '#611b94',
-    '--color-timeline-react-commit-text': '#e5c1ff',
-    '--color-timeline-react-layout-effects': '#611b94',
-    '--color-timeline-react-layout-effects-hover': '#51167a',
-    '--color-timeline-react-layout-effects-text': '#e5c1ff',
-    '--color-timeline-react-passive-effects': '#611b94',
-    '--color-timeline-react-passive-effects-hover': '#51167a',
-    '--color-timeline-react-passive-effects-text': '#e5c1ff',
-    '--color-timeline-react-schedule': '#2683E2',
-    '--color-timeline-react-schedule-hover': '#1a76d4',
-    '--color-timeline-react-suspense-rejected': '#f1cc14',
-    '--color-timeline-react-suspense-rejected-hover': '#e4c00f',
-    '--color-timeline-react-suspense-resolved': '#a6e59f',
-    '--color-timeline-react-suspense-resolved-hover': '#89d281',
-    '--color-timeline-react-suspense-unresolved': '#c9cacd',
-    '--color-timeline-react-suspense-unresolved-hover': '#93959a',
-    '--color-timeline-thrown-error': '#fb3655',
-    '--color-timeline-thrown-error-hover': '#f82042',
-    '--color-timeline-text-color': '#282c34',
-    '--color-timeline-text-dim-color': '#555b66',
-    '--color-timeline-react-work-border': '#3d424a',
-    '--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-scroll-caret': '#4f5766',
-    '--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-warning-background': '#ee1638',
-    '--color-warning-background-hover': '#da1030',
-    '--color-warning-text-color': '#ffffff',
-    '--color-warning-text-color-inverted': '#ee1638',
-
-    // The styles below should be kept in sync with 'root.css'
-    // They are repeated there because they're used by e.g. tooltips or context menus
-    // which get rendered outside of the DOM subtree (where normal theme/styles are written).
-    '--color-scroll-thumb': '#afb3b9',
-    '--color-scroll-track': '#313640',
-    '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
-    '--color-tooltip-text': '#000000',
-  },
-  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 COMFORTABLE_LINE_HEIGHT: number = parseInt(
-  THEME_STYLES.comfortable['--line-height-data'],
-  10,
-);
-const COMPACT_LINE_HEIGHT: number = parseInt(
-  THEME_STYLES.compact['--line-height-data'],
-  10,
-);
-
-export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js
new file mode 100644
index 0000000000000..6783eadbbd3a8
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/constants.js
@@ -0,0 +1,338 @@
+export const CHANGE_LOG_URL =
+  'https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md';
+
+export const UNSUPPORTED_VERSION_URL =
+  'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back';
+
+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': '#eeeeee',
+    '--color-resize-bar-active': '#dcdcdc',
+    '--color-resize-bar-border': '#d1d1d1',
+    '--color-resize-bar-dot': '#333333',
+    '--color-timeline-internal-module': '#d1d1d1',
+    '--color-timeline-internal-module-hover': '#c9c9c9',
+    '--color-timeline-internal-module-text': '#444',
+    '--color-timeline-native-event': '#ccc',
+    '--color-timeline-native-event-hover': '#aaa',
+    '--color-timeline-network-primary': '#fcf3dc',
+    '--color-timeline-network-primary-hover': '#f0e7d1',
+    '--color-timeline-network-secondary': '#efc457',
+    '--color-timeline-network-secondary-hover': '#e3ba52',
+    '--color-timeline-priority-background': '#f6f6f6',
+    '--color-timeline-priority-border': '#eeeeee',
+    '--color-timeline-user-timing': '#c9cacd',
+    '--color-timeline-user-timing-hover': '#93959a',
+    '--color-timeline-react-idle': '#d3e5f6',
+    '--color-timeline-react-idle-hover': '#c3d9ef',
+    '--color-timeline-react-render': '#9fc3f3',
+    '--color-timeline-react-render-hover': '#83afe9',
+    '--color-timeline-react-render-text': '#11365e',
+    '--color-timeline-react-commit': '#c88ff0',
+    '--color-timeline-react-commit-hover': '#b281d6',
+    '--color-timeline-react-commit-text': '#3e2c4a',
+    '--color-timeline-react-layout-effects': '#b281d6',
+    '--color-timeline-react-layout-effects-hover': '#9d71bd',
+    '--color-timeline-react-layout-effects-text': '#3e2c4a',
+    '--color-timeline-react-passive-effects': '#b281d6',
+    '--color-timeline-react-passive-effects-hover': '#9d71bd',
+    '--color-timeline-react-passive-effects-text': '#3e2c4a',
+    '--color-timeline-react-schedule': '#9fc3f3',
+    '--color-timeline-react-schedule-hover': '#2683E2',
+    '--color-timeline-react-suspense-rejected': '#f1cc14',
+    '--color-timeline-react-suspense-rejected-hover': '#ffdf37',
+    '--color-timeline-react-suspense-resolved': '#a6e59f',
+    '--color-timeline-react-suspense-resolved-hover': '#89d281',
+    '--color-timeline-react-suspense-unresolved': '#c9cacd',
+    '--color-timeline-react-suspense-unresolved-hover': '#93959a',
+    '--color-timeline-thrown-error': '#ee1638',
+    '--color-timeline-thrown-error-hover': '#da1030',
+    '--color-timeline-text-color': '#000000',
+    '--color-timeline-text-dim-color': '#ccc',
+    '--color-timeline-react-work-border': '#eeeeee',
+    '--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-scroll-caret': 'rgba(150, 150, 150, 0.5)',
+    '--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-warning-background': '#fb3655',
+    '--color-warning-background-hover': '#f82042',
+    '--color-warning-text-color': '#ffffff',
+    '--color-warning-text-color-inverted': '#fd4d69',
+
+    // The styles below should be kept in sync with 'root.css'
+    // They are repeated there because they're used by e.g. tooltips or context menus
+    // which get rendered outside of the DOM subtree (where normal theme/styles are written).
+    '--color-scroll-thumb': '#c2c2c2',
+    '--color-scroll-track': '#fafafa',
+    '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
+    '--color-tooltip-text': '#ffffff',
+  },
+  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': '#282c34',
+    '--color-resize-bar-active': '#31363f',
+    '--color-resize-bar-border': '#3d424a',
+    '--color-resize-bar-dot': '#cfd1d5',
+    '--color-timeline-internal-module': '#303542',
+    '--color-timeline-internal-module-hover': '#363b4a',
+    '--color-timeline-internal-module-text': '#7f8899',
+    '--color-timeline-native-event': '#b2b2b2',
+    '--color-timeline-native-event-hover': '#949494',
+    '--color-timeline-network-primary': '#fcf3dc',
+    '--color-timeline-network-primary-hover': '#e3dbc5',
+    '--color-timeline-network-secondary': '#efc457',
+    '--color-timeline-network-secondary-hover': '#d6af4d',
+    '--color-timeline-priority-background': '#1d2129',
+    '--color-timeline-priority-border': '#282c34',
+    '--color-timeline-user-timing': '#c9cacd',
+    '--color-timeline-user-timing-hover': '#93959a',
+    '--color-timeline-react-idle': '#3d485b',
+    '--color-timeline-react-idle-hover': '#465269',
+    '--color-timeline-react-render': '#2683E2',
+    '--color-timeline-react-render-hover': '#1a76d4',
+    '--color-timeline-react-render-text': '#11365e',
+    '--color-timeline-react-commit': '#731fad',
+    '--color-timeline-react-commit-hover': '#611b94',
+    '--color-timeline-react-commit-text': '#e5c1ff',
+    '--color-timeline-react-layout-effects': '#611b94',
+    '--color-timeline-react-layout-effects-hover': '#51167a',
+    '--color-timeline-react-layout-effects-text': '#e5c1ff',
+    '--color-timeline-react-passive-effects': '#611b94',
+    '--color-timeline-react-passive-effects-hover': '#51167a',
+    '--color-timeline-react-passive-effects-text': '#e5c1ff',
+    '--color-timeline-react-schedule': '#2683E2',
+    '--color-timeline-react-schedule-hover': '#1a76d4',
+    '--color-timeline-react-suspense-rejected': '#f1cc14',
+    '--color-timeline-react-suspense-rejected-hover': '#e4c00f',
+    '--color-timeline-react-suspense-resolved': '#a6e59f',
+    '--color-timeline-react-suspense-resolved-hover': '#89d281',
+    '--color-timeline-react-suspense-unresolved': '#c9cacd',
+    '--color-timeline-react-suspense-unresolved-hover': '#93959a',
+    '--color-timeline-thrown-error': '#fb3655',
+    '--color-timeline-thrown-error-hover': '#f82042',
+    '--color-timeline-text-color': '#282c34',
+    '--color-timeline-text-dim-color': '#555b66',
+    '--color-timeline-react-work-border': '#3d424a',
+    '--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-scroll-caret': '#4f5766',
+    '--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-warning-background': '#ee1638',
+    '--color-warning-background-hover': '#da1030',
+    '--color-warning-text-color': '#ffffff',
+    '--color-warning-text-color-inverted': '#ee1638',
+
+    // The styles below should be kept in sync with 'root.css'
+    // They are repeated there because they're used by e.g. tooltips or context menus
+    // which get rendered outside of the DOM subtree (where normal theme/styles are written).
+    '--color-scroll-thumb': '#afb3b9',
+    '--color-scroll-track': '#313640',
+    '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
+    '--color-tooltip-text': '#000000',
+  },
+  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 COMFORTABLE_LINE_HEIGHT: number = parseInt(
+  THEME_STYLES.comfortable['--line-height-data'],
+  10,
+);
+const COMPACT_LINE_HEIGHT: number = parseInt(
+  THEME_STYLES.compact['--line-height-data'],
+  10,
+);
+
+export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 59a2ab55fed67..ea7a996d3235c 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -40,6 +40,7 @@ import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
 import ThemeProvider from './ThemeProvider';
 import {LOCAL_STORAGE_DEFAULT_TAB_KEY} from '../../constants';
+import {logEvent} from '../../Logger';
 
 import styles from './DevTools.css';
 
@@ -49,9 +50,8 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 import type {FetchFileWithCaching} from './Components/FetchFileWithCachingContext';
 import type {HookNamesModuleLoaderFunction} from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
-import {logEvent} from '../../Logger';
+import type {BrowserTheme} from 'react-devtools-shared/src/types';
 
-export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler';
 
 export type ViewElementSource = (
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
index 77d780ffc8a1d..1e04c304a743d 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
@@ -9,7 +9,7 @@
 
 import * as React from 'react';
 import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
-import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/constants';
+import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/devtools/constants';
 import Icon from '../Icon';
 import styles from './shared.css';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index 9ab4cb301b49f..d56f32f81142c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 import {useContext, useMemo} from 'react';
 import {SettingsContext} from './SettingsContext';
 import {StoreContext} from '../context';
-import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
+import {CHANGE_LOG_URL} from 'react-devtools-shared/src/devtools/constants';
 
 import styles from './SettingsShared.css';
 
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 566b80179072b..40eea803deded 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -18,8 +18,6 @@ import {
   useMemo,
 } from 'react';
 import {
-  COMFORTABLE_LINE_HEIGHT,
-  COMPACT_LINE_HEIGHT,
   LOCAL_STORAGE_BROWSER_THEME,
   LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
@@ -28,11 +26,15 @@ import {
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
   LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
 } from 'react-devtools-shared/src/constants';
+import {
+  COMFORTABLE_LINE_HEIGHT,
+  COMPACT_LINE_HEIGHT,
+} from 'react-devtools-shared/src/devtools/constants';
 import {useLocalStorage} from '../hooks';
 import {BridgeContext} from '../context';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
-import type {BrowserTheme} from '../DevTools';
+import type {BrowserTheme} from 'react-devtools-shared/src/types';
 
 export type DisplayDensity = 'comfortable' | 'compact';
 export type Theme = 'auto' | 'light' | 'dark';
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
index f40d2ef66047f..7f2421893003c 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
@@ -12,7 +12,7 @@ import {Fragment, useContext, useEffect, useState} from 'react';
 import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
 import {ModalDialogContext} from './ModalDialog';
 import {StoreContext} from './context';
-import {UNSUPPORTED_VERSION_URL} from 'react-devtools-shared/src/constants';
+import {UNSUPPORTED_VERSION_URL} from '../constants';
 
 import styles from './UnsupportedVersionDialog.css';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
index 96e8cf03b9452..25b5ae0547a8d 100644
--- a/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
+++ b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
@@ -9,7 +9,7 @@
 
 import {useContext, useMemo} from 'react';
 import {SettingsContext} from './Settings/SettingsContext';
-import {THEME_STYLES} from '../../constants';
+import {THEME_STYLES} from '../constants';
 
 const useThemeStyles = (): any => {
   const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 09e7843b71faa..0d0d2785ba2be 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -8,7 +8,7 @@
  * @flow
  */
 
-import type {BrowserTheme} from './devtools/views/DevTools';
+import type {BrowserTheme} from './types';
 import type {
   DevToolsHook,
   Handler,
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index 3e83590b6ae6e..51376553a3a45 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -7,6 +7,15 @@
  * @flow
  */
 
+/**
+ * WARNING:
+ * This file contains types that are designed for React DevTools UI and how it interacts with the backend.
+ * They might be used in different versions of DevTools backends.
+ * Be mindful of backwards compatibility when making changes.
+ */
+
+export type BrowserTheme = 'dark' | 'light';
+
 export type Wall = {
   // `listen` returns the "unlisten" function.
   listen: (fn: Function) => Function,
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 58845219d9591..5d6a9f3b60bd2 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -53,9 +53,8 @@ import {localStorageGetItem, localStorageSetItem} from './storage';
 import {meta} from './hydration';
 import isArray from './isArray';
 
-import type {ComponentFilter, ElementType} from './types';
+import type {ComponentFilter, ElementType, BrowserTheme} from './types';
 import type {LRUCache} from 'react-devtools-shared/src/types';
-import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 // $FlowFixMe[method-unbinding]
 const hasOwnProperty = Object.prototype.hasOwnProperty;
diff --git a/packages/react-devtools-timeline/src/constants.js b/packages/react-devtools-timeline/src/constants.js
index cf1e20718a382..92c75d8e9f9cd 100644
--- a/packages/react-devtools-timeline/src/constants.js
+++ b/packages/react-devtools-timeline/src/constants.js
@@ -10,7 +10,7 @@
 export {
   COMFORTABLE_LINE_HEIGHT,
   COMPACT_LINE_HEIGHT,
-} from 'react-devtools-shared/src/constants.js';
+} from 'react-devtools-shared/src/devtools/constants.js';
 
 export const REACT_TOTAL_NUM_LANES = 31;