feat[devtools-fusebox]: support theme option (#28832)
Support propagating theme from Chrome DevTools frontend, the field is optional. Next step, which is out of scope of this project and general improvement for React DevTools: teach RDT to listen to theme changes and if the theme preference is set to `auto` in settings, update the theme accordingly with the browser devtools.
Ruslan Lesiutin committed
Apr 12, 2024 at 17:26 UTC
7625f0d501bea50efe1e3cfc7208329c18e3369e
1 file changed
+7
-2
packages/react-devtools-fusebox/src/frontend.js
+7
-2
@@ -13,7 +13,10 @@ import Bridge from 'react-devtools-shared/src/bridge';
13
import Store from 'react-devtools-shared/src/devtools/store';
14
import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
15
16
-import type {Wall} from 'react-devtools-shared/src/frontend/types';
16
+import type {
17
+ BrowserTheme,
18
+ Wall,
19
+} from 'react-devtools-shared/src/frontend/types';
20
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
21
22
type Config = {
@@ -42,18 +45,20 @@ export function createStore(bridge: FrontendBridge, config?: Config): Store {
45
type InitializationOptions = {
46
bridge: FrontendBridge,
47
store: Store,
48
+ theme?: BrowserTheme,
49
};
50
51
export function initialize(
52
contentWindow: Element | Document,
53
options: InitializationOptions,
54
): void {
51
- const {bridge, store} = options;
55
+ const {bridge, store, theme = 'light'} = options;
56
const root = createRoot(contentWindow);
57
58
root.render(
59
<DevTools
60
bridge={bridge}
61
+ browserTheme={theme}
62
store={store}
63
showTabBar={true}
64
warnIfLegacyBackendDetected={true}