temp

packages/react-devtools-extensions/src/main/index.js

@@ -5,7 +5,7 @@ import {flushSync} from 'react-dom';
 import {createRoot} from 'react-dom/client';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
-import {getBrowserTheme} from '../utils';
+import {getBrowserTheme, listenToDevToolsThemeChange} from '../utils';
 import {
   localStorageGetItem,
   localStorageSetItem,
@@ -152,6 +152,7 @@ function createBridgeAndStore() {
       createElement(DevTools, {
         bridge,
         browserTheme: getBrowserTheme(),
+        browserThemeListener: listenToDevToolsThemeChange,
         componentsPortalContainer,
         enabledInspectedElementContextMenu: true,
         fetchFileWithCaching,

packages/react-devtools-extensions/src/utils.js

@@ -1,6 +1,6 @@
 /* global chrome */
 
-import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {BrowserTheme, BrowserThemeListenerUnsubscribe} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 export function getBrowserTheme(): BrowserTheme {
   if (__IS_CHROME__) {
@@ -21,5 +21,17 @@ export function getBrowserTheme(): BrowserTheme {
   }
 }
 
+export function listenToDevToolsThemeChange(callback: ((newTheme: BrowserTheme) => void)): BrowserThemeListenerUnsubscribe {
+  try {
+    chrome.devtools.panels.setThemeChangeHandler(theme => {
+      callback(theme);
+    });
+  } catch (e) {
+    console.warn('couldn\'t set up the dev tools theme change listener.');
+  }
+  // TODO: no way to unsubscribe from "setThemeChangeHandler"
+  return () => {};
+}
+
 export const COMPACT_VERSION_NAME = 'compact';
 export const EXTENSION_CONTAINED_VERSIONS = [COMPACT_VERSION_NAME];

packages/react-devtools-inline/src/frontend.js

@@ -13,6 +13,7 @@ import {
   getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
 
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 import type {Wall} from 'react-devtools-shared/src/frontend/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
@@ -91,8 +92,21 @@ export function initialize(
 
   frontendBridge.addListener('getSavedPreferences', onGetSavedPreferences);
 
+  function listenToBrowserThemeChange(callback: () => BrowserTheme): void {
+    window.matchMedia('(prefers-color-scheme: dark)')?.addEventListener?.('change', event => {
+      callback(event.matches ? 'dark' : 'light');
+      console.log('new browser theme:', event.matches ? 'dark' : 'light');
+    });
+  }
+
   const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
-    <DevTools ref={ref} bridge={frontendBridge} store={store} {...props} />
+    <DevTools
+      ref={ref}
+      bridge={frontendBridge}
+      store={store}
+      browserThemeListener={listenToBrowserThemeChange}
+      {...props}
+    />
   ));
   ForwardRef.displayName = 'DevTools';
 

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -13,7 +13,7 @@ import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
 import * as React from 'react';
-import {useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react';
+import {useState, useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react';
 import Store from '../store';
 import {
   BridgeContext,
@@ -66,9 +66,13 @@ export type CanViewElementSource = (
   symbolicatedSource: Source | null,
 ) => boolean;
 
+export type BrowserThemeListenerUnsubscribe = () => void;
+export type BrowserThemeListener = (callback: ((newTheme: BrowserTheme) => void)) => BrowserThemeListenerUnsubscribe;
+
 export type Props = {
   bridge: FrontendBridge,
   browserTheme?: BrowserTheme,
+  browserThemeListener?: BrowserThemeListener,
   canViewElementSourceFunction?: ?CanViewElementSource,
   defaultTab?: TabID,
   enabledInspectedElementContextMenu?: boolean,
@@ -122,7 +126,8 @@ const tabs = [componentsTab, profilerTab];
 
 export default function DevTools({
   bridge,
-  browserTheme = 'light',
+  browserTheme: initialBrowserTheme = 'light',
+  browserThemeListener = () => () => {},
   canViewElementSourceFunction,
   componentsPortalContainer,
   defaultTab = 'components',
@@ -144,6 +149,14 @@ export default function DevTools({
   hideLogAction,
   hideViewSourceAction,
 }: Props): React.Node {
+  const [browserTheme, setBrowserTheme] = useState(initialBrowserTheme);
+  useEffect(() => {
+    const unsubscribe = browserThemeListener(newTheme => setBrowserTheme(newTheme));
+    return () => {
+      unsubscribe()
+    };
+  }, []);
+
   const [currentTab, setTab] = useLocalStorage<TabID>(
     LOCAL_STORAGE_DEFAULT_TAB_KEY,
     defaultTab,

react.code-workspace

@@ -0,0 +1,28 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"extensions": {
+		"recommendations": [
+			"dbaeumer.vscode-eslint",
+			"editorconfig.editorconfig",
+			"esbenp.prettier-vscode",
+			"flowtype.flow-for-vscode"
+		],
+	},
+	"settings": {
+		"editor.formatOnSave": true,
+		"flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow",
+		"javascript.validate.enable": false,
+    "search.useIgnoreFiles": true,
+		"search.exclude": {
+			"**/dist/**": true,
+			"**/build/**": true,
+			"**/out/**": true,
+			"*.map": true,
+			"*.log": true,
+		}
+	}
+}