Devtools: Refactor imperative theme code (#21950)
Co-authored-by: Brian Vaughn <bvaughn@fb.com>
houssemchebeb committed
Aug 2, 2021 at 16:20 UTC
e3b76a85c5233fad6f411c14e88ac4a61af800fb
8 files changed
+375
-635
packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
+5
-2
@@ -15,6 +15,7 @@ import {
15
useContext,
16
useDeferredValue,
17
useLayoutEffect,
18
+ useRef,
19
useState,
20
} from 'react';
21
import {SettingsContext} from 'react-devtools-shared/src/devtools/views/Settings/SettingsContext';
@@ -30,6 +31,8 @@ export function SchedulingProfiler(_: {||}) {
31
SchedulingProfilerContext,
32
);
33
34
+ const ref = useRef(null);
35
+
36
// HACK: Canvas rendering uses an imperative API,
37
// but DevTools colors are stored in CSS variables (see root.css and SettingsContext).
38
// When the theme changes, we need to trigger update the imperative colors and re-draw the Canvas.
@@ -42,7 +45,7 @@ export function SchedulingProfiler(_: {||}) {
45
const [key, setKey] = useState<string>(theme);
46
useLayoutEffect(() => {
47
const pollForTheme = () => {
45
- if (updateColorsToMatchTheme()) {
48
+ if (updateColorsToMatchTheme(((ref.current: any): HTMLDivElement))) {
49
clearInterval(intervalID);
50
setKey(deferredTheme);
51
}
@@ -56,7 +59,7 @@ export function SchedulingProfiler(_: {||}) {
59
}, [deferredTheme]);
60
61
return (
59
- <div className={styles.Content}>
62
+ <div className={styles.Content} ref={ref}>
63
{schedulingProfilerData ? (
64
<Suspense fallback={<ProcessingData />}>
65
<DataResourceComponent
packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+2
-2
@@ -82,8 +82,8 @@ export let COLORS = {
82
WARNING_TEXT_INVERED: '',
83
};
84
85
-export function updateColorsToMatchTheme(): boolean {
86
- const computedStyle = getComputedStyle((document.body: any));
85
+export function updateColorsToMatchTheme(element: Element): boolean {
86
+ const computedStyle = getComputedStyle(element);
87
88
// Check to see if styles have been initialized...
89
if (computedStyle.getPropertyValue('--color-background') == null) {
packages/react-devtools-shared/src/constants.js
+287
-24
@@ -55,33 +55,296 @@ export const UNSUPPORTED_VERSION_URL =
55
export const REACT_DEVTOOLS_WORKPLACE_URL =
56
'https://fburl.com/react-devtools-workplace-group';
57
58
+import type {
59
+ Theme,
60
+ DisplayDensity,
61
+} from './devtools/views/Settings/SettingsContext';
62
+
63
+export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
64
+ light: {
65
+ '--color-attribute-name': '#ef6632',
66
+ '--color-attribute-name-not-editable': '#23272f',
67
+ '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
68
+ '--color-attribute-value': '#1a1aa6',
69
+ '--color-attribute-value-inverted': '#ffffff',
70
+ '--color-attribute-editable-value': '#1a1aa6',
71
+ '--color-background': '#ffffff',
72
+ '--color-background-hover': 'rgba(0, 136, 250, 0.1)',
73
+ '--color-background-inactive': '#e5e5e5',
74
+ '--color-background-invalid': '#fff0f0',
75
+ '--color-background-selected': '#0088fa',
76
+ '--color-button-background': '#ffffff',
77
+ '--color-button-background-focus': '#ededed',
78
+ '--color-button': '#5f6673',
79
+ '--color-button-disabled': '#cfd1d5',
80
+ '--color-button-active': '#0088fa',
81
+ '--color-button-focus': '#23272f',
82
+ '--color-button-hover': '#23272f',
83
+ '--color-border': '#eeeeee',
84
+ '--color-commit-did-not-render-fill': '#cfd1d5',
85
+ '--color-commit-did-not-render-fill-text': '#000000',
86
+ '--color-commit-did-not-render-pattern': '#cfd1d5',
87
+ '--color-commit-did-not-render-pattern-text': '#333333',
88
+ '--color-commit-gradient-0': '#37afa9',
89
+ '--color-commit-gradient-1': '#63b19e',
90
+ '--color-commit-gradient-2': '#80b393',
91
+ '--color-commit-gradient-3': '#97b488',
92
+ '--color-commit-gradient-4': '#abb67d',
93
+ '--color-commit-gradient-5': '#beb771',
94
+ '--color-commit-gradient-6': '#cfb965',
95
+ '--color-commit-gradient-7': '#dfba57',
96
+ '--color-commit-gradient-8': '#efbb49',
97
+ '--color-commit-gradient-9': '#febc38',
98
+ '--color-commit-gradient-text': '#000000',
99
+ '--color-component-name': '#6a51b2',
100
+ '--color-component-name-inverted': '#ffffff',
101
+ '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',
102
+ '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
103
+ '--color-component-badge-count': '#777d88',
104
+ '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
105
+ '--color-console-error-badge-text': '#ffffff',
106
+ '--color-console-error-background': '#fff0f0',
107
+ '--color-console-error-border': '#ffd6d6',
108
+ '--color-console-error-icon': '#eb3941',
109
+ '--color-console-error-text': '#fe2e31',
110
+ '--color-console-warning-badge-text': '#000000',
111
+ '--color-console-warning-background': '#fffbe5',
112
+ '--color-console-warning-border': '#fff5c1',
113
+ '--color-console-warning-icon': '#f4bd00',
114
+ '--color-console-warning-text': '#64460c',
115
+ '--color-context-background': 'rgba(0,0,0,.9)',
116
+ '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
117
+ '--color-context-background-selected': '#178fb9',
118
+ '--color-context-border': '#3d424a',
119
+ '--color-context-text': '#ffffff',
120
+ '--color-context-text-selected': '#ffffff',
121
+ '--color-dim': '#777d88',
122
+ '--color-dimmer': '#cfd1d5',
123
+ '--color-dimmest': '#eff0f1',
124
+ '--color-error-background': 'hsl(0, 100%, 97%)',
125
+ '--color-error-border': 'hsl(0, 100%, 92%)',
126
+ '--color-error-text': '#ff0000',
127
+ '--color-expand-collapse-toggle': '#777d88',
128
+ '--color-link': '#0000ff',
129
+ '--color-modal-background': 'rgba(255, 255, 255, 0.75)',
130
+ '--color-bridge-version-npm-background': '#eff0f1',
131
+ '--color-bridge-version-npm-text': '#000000',
132
+ '--color-bridge-version-number': '#0088fa',
133
+ '--color-primitive-hook-badge-background': '#e5e5e5',
134
+ '--color-primitive-hook-badge-text': '#5f6673',
135
+ '--color-record-active': '#fc3a4b',
136
+ '--color-record-hover': '#3578e5',
137
+ '--color-record-inactive': '#0088fa',
138
+ '--color-resize-bar': '#eeeeee',
139
+ '--color-resize-bar-active': '#dcdcdc',
140
+ '--color-resize-bar-border': '#d1d1d1',
141
+ '--color-resize-bar-dot': '#333333',
142
+ '--color-scheduling-profiler-native-event': '#ccc',
143
+ '--color-scheduling-profiler-native-event-hover': '#aaa',
144
+ '--color-scheduling-profiler-priority-background': '#f6f6f6',
145
+ '--color-scheduling-profiler-priority-border': '#eeeeee',
146
+ '--color-scheduling-profiler-user-timing': '#c9cacd',
147
+ '--color-scheduling-profiler-user-timing-hover': '#93959a',
148
+ '--color-scheduling-profiler-react-idle': '#d3e5f6',
149
+ '--color-scheduling-profiler-react-idle-hover': '#c3d9ef',
150
+ '--color-scheduling-profiler-react-render': '#9fc3f3',
151
+ '--color-scheduling-profiler-react-render-hover': '#83afe9',
152
+ '--color-scheduling-profiler-react-commit': '#c88ff0',
153
+ '--color-scheduling-profiler-react-commit-hover': '#b281d6',
154
+ '--color-scheduling-profiler-react-layout-effects': '#b281d6',
155
+ '--color-scheduling-profiler-react-layout-effects-hover': '#9d71bd',
156
+ '--color-scheduling-profiler-react-passive-effects': '#b281d6',
157
+ '--color-scheduling-profiler-react-passive-effects-hover': '#9d71bd',
158
+ '--color-scheduling-profiler-react-schedule': '#9fc3f3',
159
+ '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
160
+ '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
161
+ '--color-scheduling-profiler-react-suspense-rejected-hover': '#ffdf37',
162
+ '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
163
+ '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
164
+ '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
165
+ '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
166
+ '--color-scheduling-profiler-text-color': '#000000',
167
+ '--color-scheduling-profiler-react-work-border': '#ffffff',
168
+ '--color-scroll-thumb': '#c2c2c2',
169
+ '--color-scroll-track': '#fafafa',
170
+ '--color-search-match': 'yellow',
171
+ '--color-search-match-current': '#f7923b',
172
+ '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
173
+ '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
174
+ '--color-scroll-caret': 'rgba(150, 150, 150, 0.5)',
175
+ '--color-tab-selected-border': '#0088fa',
176
+ '--color-text': '#000000',
177
+ '--color-text-invalid': '#ff0000',
178
+ '--color-text-selected': '#ffffff',
179
+ '--color-toggle-background-invalid': '#fc3a4b',
180
+ '--color-toggle-background-on': '#0088fa',
181
+ '--color-toggle-background-off': '#cfd1d5',
182
+ '--color-toggle-text': '#ffffff',
183
+ '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
184
+ '--color-tooltip-text': '#ffffff',
185
+ '--color-warning-background': '#fb3655',
186
+ '--color-warning-background-hover': '#f82042',
187
+ '--color-warning-text-color': '#ffffff',
188
+ '--color-warning-text-color-inverted': '#fd4d69',
189
+ },
190
+ dark: {
191
+ '--color-attribute-name': '#9d87d2',
192
+ '--color-attribute-name-not-editable': '#ededed',
193
+ '--color-attribute-name-inverted': '#282828',
194
+ '--color-attribute-value': '#cedae0',
195
+ '--color-attribute-value-inverted': '#ffffff',
196
+ '--color-attribute-editable-value': 'yellow',
197
+ '--color-background': '#282c34',
198
+ '--color-background-hover': 'rgba(255, 255, 255, 0.1)',
199
+ '--color-background-inactive': '#3d424a',
200
+ '--color-background-invalid': '#5c0000',
201
+ '--color-background-selected': '#178fb9',
202
+ '--color-button-background': '#282c34',
203
+ '--color-button-background-focus': '#3d424a',
204
+ '--color-button': '#afb3b9',
205
+ '--color-button-active': '#61dafb',
206
+ '--color-button-disabled': '#4f5766',
207
+ '--color-button-focus': '#a2e9fc',
208
+ '--color-button-hover': '#ededed',
209
+ '--color-border': '#3d424a',
210
+ '--color-commit-did-not-render-fill': '#777d88',
211
+ '--color-commit-did-not-render-fill-text': '#000000',
212
+ '--color-commit-did-not-render-pattern': '#666c77',
213
+ '--color-commit-did-not-render-pattern-text': '#ffffff',
214
+ '--color-commit-gradient-0': '#37afa9',
215
+ '--color-commit-gradient-1': '#63b19e',
216
+ '--color-commit-gradient-2': '#80b393',
217
+ '--color-commit-gradient-3': '#97b488',
218
+ '--color-commit-gradient-4': '#abb67d',
219
+ '--color-commit-gradient-5': '#beb771',
220
+ '--color-commit-gradient-6': '#cfb965',
221
+ '--color-commit-gradient-7': '#dfba57',
222
+ '--color-commit-gradient-8': '#efbb49',
223
+ '--color-commit-gradient-9': '#febc38',
224
+ '--color-commit-gradient-text': '#000000',
225
+ '--color-component-name': '#61dafb',
226
+ '--color-component-name-inverted': '#282828',
227
+ '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
228
+ '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
229
+ '--color-component-badge-count': '#8f949d',
230
+ '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
231
+ '--color-console-error-badge-text': '#000000',
232
+ '--color-console-error-background': '#290000',
233
+ '--color-console-error-border': '#5c0000',
234
+ '--color-console-error-icon': '#eb3941',
235
+ '--color-console-error-text': '#fc7f7f',
236
+ '--color-console-warning-badge-text': '#000000',
237
+ '--color-console-warning-background': '#332b00',
238
+ '--color-console-warning-border': '#665500',
239
+ '--color-console-warning-icon': '#f4bd00',
240
+ '--color-console-warning-text': '#f5f2ed',
241
+ '--color-context-background': 'rgba(255,255,255,.95)',
242
+ '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
243
+ '--color-context-background-selected': '#0088fa',
244
+ '--color-context-border': '#eeeeee',
245
+ '--color-context-text': '#000000',
246
+ '--color-context-text-selected': '#ffffff',
247
+ '--color-dim': '#8f949d',
248
+ '--color-dimmer': '#777d88',
249
+ '--color-dimmest': '#4f5766',
250
+ '--color-error-background': '#200',
251
+ '--color-error-border': '#900',
252
+ '--color-error-text': '#f55',
253
+ '--color-expand-collapse-toggle': '#8f949d',
254
+ '--color-link': '#61dafb',
255
+ '--color-modal-background': 'rgba(0, 0, 0, 0.75)',
256
+ '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
257
+ '--color-bridge-version-npm-text': '#ffffff',
258
+ '--color-bridge-version-number': 'yellow',
259
+ '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
260
+ '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
261
+ '--color-record-active': '#fc3a4b',
262
+ '--color-record-hover': '#a2e9fc',
263
+ '--color-record-inactive': '#61dafb',
264
+ '--color-resize-bar': '#282c34',
265
+ '--color-resize-bar-active': '#31363f',
266
+ '--color-resize-bar-border': '#3d424a',
267
+ '--color-resize-bar-dot': '#cfd1d5',
268
+ '--color-scheduling-profiler-native-event': '#b2b2b2',
269
+ '--color-scheduling-profiler-native-event-hover': '#949494',
270
+ '--color-scheduling-profiler-priority-background': '#1d2129',
271
+ '--color-scheduling-profiler-priority-border': '#282c34',
272
+ '--color-scheduling-profiler-user-timing': '#c9cacd',
273
+ '--color-scheduling-profiler-user-timing-hover': '#93959a',
274
+ '--color-scheduling-profiler-react-idle': '#3d485b',
275
+ '--color-scheduling-profiler-react-idle-hover': '#465269',
276
+ '--color-scheduling-profiler-react-render': '#2683E2',
277
+ '--color-scheduling-profiler-react-render-hover': '#1a76d4',
278
+ '--color-scheduling-profiler-react-commit': '#731fad',
279
+ '--color-scheduling-profiler-react-commit-hover': '#611b94',
280
+ '--color-scheduling-profiler-react-layout-effects': '#611b94',
281
+ '--color-scheduling-profiler-react-layout-effects-hover': '#51167a',
282
+ '--color-scheduling-profiler-react-passive-effects': '#611b94',
283
+ '--color-scheduling-profiler-react-passive-effects-hover': '#51167a',
284
+ '--color-scheduling-profiler-react-schedule': '#2683E2',
285
+ '--color-scheduling-profiler-react-schedule-hover': '#1a76d4',
286
+ '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
287
+ '--color-scheduling-profiler-react-suspense-rejected-hover': '#e4c00f',
288
+ '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
289
+ '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
290
+ '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
291
+ '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
292
+ '--color-scheduling-profiler-text-color': '#000000',
293
+ '--color-scheduling-profiler-react-work-border': '#ffffff',
294
+ '--color-scroll-thumb': '#afb3b9',
295
+ '--color-scroll-track': '#313640',
296
+ '--color-search-match': 'yellow',
297
+ '--color-search-match-current': '#f7923b',
298
+ '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
299
+ '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
300
+ '--color-scroll-caret': '#4f5766',
301
+ '--color-shadow': 'rgba(0, 0, 0, 0.5)',
302
+ '--color-tab-selected-border': '#178fb9',
303
+ '--color-text': '#ffffff',
304
+ '--color-text-invalid': '#ff8080',
305
+ '--color-text-selected': '#ffffff',
306
+ '--color-toggle-background-invalid': '#fc3a4b',
307
+ '--color-toggle-background-on': '#178fb9',
308
+ '--color-toggle-background-off': '#777d88',
309
+ '--color-toggle-text': '#ffffff',
310
+ '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
311
+ '--color-tooltip-text': '#000000',
312
+ '--color-warning-background': '#ee1638',
313
+ '--color-warning-background-hover': '#da1030',
314
+ '--color-warning-text-color': '#ffffff',
315
+ '--color-warning-text-color-inverted': '#ee1638',
316
+ },
317
+ compact: {
318
+ '--font-size-monospace-small': '9px',
319
+ '--font-size-monospace-normal': '11px',
320
+ '--font-size-monospace-large': '15px',
321
+ '--font-size-sans-small': '10px',
322
+ '--font-size-sans-normal': '12px',
323
+ '--font-size-sans-large': '14px',
324
+ '--line-height-data': '18px',
325
+ },
326
+ comfortable: {
327
+ '--font-size-monospace-small': '10px',
328
+ '--font-size-monospace-normal': '13px',
329
+ '--font-size-monospace-large': '17px',
330
+ '--font-size-sans-small': '12px',
331
+ '--font-size-sans-normal': '14px',
332
+ '--font-size-sans-large': '16px',
333
+ '--line-height-data': '22px',
334
+ },
335
+};
336
+
337
// HACK
338
//
60
-// Extracting during build time avoids a temporarily invalid state for the inline target.
339
// Sometimes the inline target is rendered before root styles are applied,
340
// which would result in e.g. NaN itemSize being passed to react-window list.
63
-//
64
-let COMFORTABLE_LINE_HEIGHT;
65
-let COMPACT_LINE_HEIGHT;
66
-
67
-try {
68
- // $FlowFixMe
69
- const rawStyleString = require('!!raw-loader!react-devtools-shared/src/devtools/views/root.css')
70
- .default;
71
-
72
- const extractVar = varName => {
73
- const regExp = new RegExp(`${varName}: ([0-9]+)`);
74
- const match = rawStyleString.match(regExp);
75
- return parseInt(match[1], 10);
76
- };
77
-
78
- COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data');
79
- COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
80
-} catch (error) {
81
- // We can't use the Webpack loader syntax in the context of Jest,
82
- // so tests need some reasonably meaningful fallback value.
83
- COMFORTABLE_LINE_HEIGHT = 15;
84
- COMPACT_LINE_HEIGHT = 10;
85
-}
341
+const COMFORTABLE_LINE_HEIGHT = parseInt(
342
+ THEME_STYLES.comfortable['--line-height-data'],
343
+ 10,
344
+);
345
+const COMPACT_LINE_HEIGHT = parseInt(
346
+ THEME_STYLES.compact['--line-height-data'],
347
+ 10,
348
+);
349
350
export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
packages/react-devtools-shared/src/devtools/views/DevTools.js
+32
-29
@@ -31,6 +31,7 @@ import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
31
import UnsupportedVersionDialog from './UnsupportedVersionDialog';
32
import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
33
import {useLocalStorage} from './hooks';
34
+import ThemeProvider from './ThemeProvider';
35
36
import styles from './DevTools.css';
37
@@ -220,38 +221,40 @@ export default function DevTools({
221
<TreeContextController>
222
<ProfilerContextController>
223
<SchedulingProfilerContextController>
223
- <div className={styles.DevTools} ref={devToolsRef}>
224
- {showTabBar && (
225
- <div className={styles.TabBar}>
226
- <ReactLogo />
227
- <span className={styles.DevToolsVersion}>
228
- {process.env.DEVTOOLS_VERSION}
229
- </span>
230
- <div className={styles.Spacer} />
231
- <TabBar
232
- currentTab={tab}
233
- id="DevTools"
234
- selectTab={setTab}
235
- tabs={tabs}
236
- type="navigation"
224
+ <ThemeProvider>
225
+ <div className={styles.DevTools} ref={devToolsRef}>
226
+ {showTabBar && (
227
+ <div className={styles.TabBar}>
228
+ <ReactLogo />
229
+ <span className={styles.DevToolsVersion}>
230
+ {process.env.DEVTOOLS_VERSION}
231
+ </span>
232
+ <div className={styles.Spacer} />
233
+ <TabBar
234
+ currentTab={tab}
235
+ id="DevTools"
236
+ selectTab={setTab}
237
+ tabs={tabs}
238
+ type="navigation"
239
+ />
240
+ </div>
241
+ )}
242
+ <div
243
+ className={styles.TabContent}
244
+ hidden={tab !== 'components'}>
245
+ <Components
246
+ portalContainer={componentsPortalContainer}
247
+ />
248
+ </div>
249
+ <div
250
+ className={styles.TabContent}
251
+ hidden={tab !== 'profiler'}>
252
+ <Profiler
253
+ portalContainer={profilerPortalContainer}
254
/>
255
</div>
239
- )}
240
- <div
241
- className={styles.TabContent}
242
- hidden={tab !== 'components'}>
243
- <Components
244
- portalContainer={componentsPortalContainer}
245
- />
246
- </div>
247
- <div
248
- className={styles.TabContent}
249
- hidden={tab !== 'profiler'}>
250
- <Profiler
251
- portalContainer={profilerPortalContainer}
252
- />
256
</div>
254
- </div>
257
+ </ThemeProvider>
258
</SchedulingProfilerContextController>
259
</ProfilerContextController>
260
</TreeContextController>
packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+10
-318
@@ -55,6 +55,8 @@ type Context = {|
55
theme: Theme,
56
setTheme(value: Theme): void,
57
58
+ browserTheme: Theme,
59
+
60
traceUpdatesEnabled: boolean,
61
setTraceUpdatesEnabled: (value: boolean) => void,
62
|};
@@ -198,6 +200,7 @@ function SettingsContextController({
200
setShowInlineWarningsAndErrors,
201
showInlineWarningsAndErrors,
202
theme,
203
+ browserTheme,
204
traceUpdatesEnabled,
205
}),
206
[
@@ -214,6 +217,7 @@ function SettingsContextController({
217
setShowInlineWarningsAndErrors,
218
showInlineWarningsAndErrors,
219
theme,
220
+ browserTheme,
221
traceUpdatesEnabled,
222
],
223
);
@@ -251,26 +255,6 @@ export function updateDisplayDensity(
255
displayDensity: DisplayDensity,
256
documentElements: DocumentElements,
257
): void {
254
- updateStyleHelper(
255
- displayDensity,
256
- 'font-size-monospace-normal',
257
- documentElements,
258
- );
259
- updateStyleHelper(
260
- displayDensity,
261
- 'font-size-monospace-large',
262
- documentElements,
263
- );
264
- updateStyleHelper(
265
- displayDensity,
266
- 'font-size-monospace-small',
267
- documentElements,
268
- );
269
- updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);
270
- updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
271
- updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
272
- updateStyleHelper(displayDensity, 'line-height-data', documentElements);
273
-
258
// Sizes and paddings/margins are all rem-based,
259
// so update the root font-size as well when the display preference changes.
260
const computedStyle = getComputedStyle((document.body: any));
@@ -285,304 +269,6 @@ export function updateThemeVariables(
269
theme: Theme,
270
documentElements: DocumentElements,
271
): void {
288
- updateStyleHelper(theme, 'color-attribute-name', documentElements);
289
- updateStyleHelper(
290
- theme,
291
- 'color-attribute-name-not-editable',
292
- documentElements,
293
- );
294
- updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
295
- updateStyleHelper(theme, 'color-attribute-value', documentElements);
296
- updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);
297
- updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
298
- updateStyleHelper(theme, 'color-background', documentElements);
299
- updateStyleHelper(theme, 'color-background-hover', documentElements);
300
- updateStyleHelper(theme, 'color-background-inactive', documentElements);
301
- updateStyleHelper(theme, 'color-background-invalid', documentElements);
302
- updateStyleHelper(theme, 'color-background-selected', documentElements);
303
- updateStyleHelper(theme, 'color-border', documentElements);
304
- updateStyleHelper(theme, 'color-button-background', documentElements);
305
- updateStyleHelper(theme, 'color-button-background-focus', documentElements);
306
- updateStyleHelper(theme, 'color-button', documentElements);
307
- updateStyleHelper(theme, 'color-button-active', documentElements);
308
- updateStyleHelper(theme, 'color-button-disabled', documentElements);
309
- updateStyleHelper(theme, 'color-button-focus', documentElements);
310
- updateStyleHelper(theme, 'color-button-hover', documentElements);
311
- updateStyleHelper(
312
- theme,
313
- 'color-commit-did-not-render-fill',
314
- documentElements,
315
- );
316
- updateStyleHelper(
317
- theme,
318
- 'color-commit-did-not-render-fill-text',
319
- documentElements,
320
- );
321
- updateStyleHelper(
322
- theme,
323
- 'color-commit-did-not-render-pattern',
324
- documentElements,
325
- );
326
- updateStyleHelper(
327
- theme,
328
- 'color-commit-did-not-render-pattern-text',
329
- documentElements,
330
- );
331
- updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);
332
- updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);
333
- updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);
334
- updateStyleHelper(theme, 'color-commit-gradient-3', documentElements);
335
- updateStyleHelper(theme, 'color-commit-gradient-4', documentElements);
336
- updateStyleHelper(theme, 'color-commit-gradient-5', documentElements);
337
- updateStyleHelper(theme, 'color-commit-gradient-6', documentElements);
338
- updateStyleHelper(theme, 'color-commit-gradient-7', documentElements);
339
- updateStyleHelper(theme, 'color-commit-gradient-8', documentElements);
340
- updateStyleHelper(theme, 'color-commit-gradient-9', documentElements);
341
- updateStyleHelper(theme, 'color-commit-gradient-text', documentElements);
342
- updateStyleHelper(theme, 'color-component-name', documentElements);
343
- updateStyleHelper(theme, 'color-component-name-inverted', documentElements);
344
- updateStyleHelper(
345
- theme,
346
- 'color-component-badge-background',
347
- documentElements,
348
- );
349
- updateStyleHelper(
350
- theme,
351
- 'color-component-badge-background-inverted',
352
- documentElements,
353
- );
354
- updateStyleHelper(theme, 'color-component-badge-count', documentElements);
355
- updateStyleHelper(
356
- theme,
357
- 'color-component-badge-count-inverted',
358
- documentElements,
359
- );
360
- updateStyleHelper(theme, 'color-console-error-badge-text', documentElements);
361
- updateStyleHelper(theme, 'color-console-error-background', documentElements);
362
- updateStyleHelper(theme, 'color-console-error-border', documentElements);
363
- updateStyleHelper(theme, 'color-console-error-icon', documentElements);
364
- updateStyleHelper(theme, 'color-console-error-text', documentElements);
365
- updateStyleHelper(
366
- theme,
367
- 'color-console-warning-badge-text',
368
- documentElements,
369
- );
370
- updateStyleHelper(
371
- theme,
372
- 'color-console-warning-background',
373
- documentElements,
374
- );
375
- updateStyleHelper(theme, 'color-console-warning-border', documentElements);
376
- updateStyleHelper(theme, 'color-console-warning-icon', documentElements);
377
- updateStyleHelper(theme, 'color-console-warning-text', documentElements);
378
- updateStyleHelper(theme, 'color-context-border', documentElements);
379
- updateStyleHelper(theme, 'color-context-background', documentElements);
380
- updateStyleHelper(theme, 'color-context-background-hover', documentElements);
381
- updateStyleHelper(
382
- theme,
383
- 'color-context-background-selected',
384
- documentElements,
385
- );
386
- updateStyleHelper(theme, 'color-context-border', documentElements);
387
- updateStyleHelper(theme, 'color-context-text', documentElements);
388
- updateStyleHelper(theme, 'color-context-text-selected', documentElements);
389
- updateStyleHelper(theme, 'color-dim', documentElements);
390
- updateStyleHelper(theme, 'color-dimmer', documentElements);
391
- updateStyleHelper(theme, 'color-dimmest', documentElements);
392
- updateStyleHelper(theme, 'color-error-background', documentElements);
393
- updateStyleHelper(theme, 'color-error-border', documentElements);
394
- updateStyleHelper(theme, 'color-error-text', documentElements);
395
- updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
396
- updateStyleHelper(theme, 'color-link', documentElements);
397
- updateStyleHelper(theme, 'color-modal-background', documentElements);
398
- updateStyleHelper(
399
- theme,
400
- 'color-bridge-version-npm-background',
401
- documentElements,
402
- );
403
- updateStyleHelper(theme, 'color-bridge-version-npm-text', documentElements);
404
- updateStyleHelper(theme, 'color-bridge-version-number', documentElements);
405
- updateStyleHelper(
406
- theme,
407
- 'color-primitive-hook-badge-background',
408
- documentElements,
409
- );
410
- updateStyleHelper(theme, 'color-primitive-hook-badge-text', documentElements);
411
- updateStyleHelper(theme, 'color-record-active', documentElements);
412
- updateStyleHelper(theme, 'color-record-hover', documentElements);
413
- updateStyleHelper(theme, 'color-record-inactive', documentElements);
414
- updateStyleHelper(theme, 'color-resize-bar', documentElements);
415
- updateStyleHelper(theme, 'color-resize-bar-active', documentElements);
416
- updateStyleHelper(theme, 'color-resize-bar-border', documentElements);
417
- updateStyleHelper(theme, 'color-resize-bar-dot', documentElements);
418
- updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
419
- updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
420
- updateStyleHelper(theme, 'color-search-match', documentElements);
421
- updateStyleHelper(theme, 'color-search-match-current', documentElements);
422
- updateStyleHelper(
423
- theme,
424
- 'color-scheduling-profiler-text-color',
425
- documentElements,
426
- );
427
- updateStyleHelper(
428
- theme,
429
- 'color-scheduling-profiler-native-event',
430
- documentElements,
431
- );
432
- updateStyleHelper(
433
- theme,
434
- 'color-scheduling-profiler-native-event-hover',
435
- documentElements,
436
- );
437
- updateStyleHelper(
438
- theme,
439
- 'color-selected-tree-highlight-active',
440
- documentElements,
441
- );
442
- updateStyleHelper(
443
- theme,
444
- 'color-selected-tree-highlight-inactive',
445
- documentElements,
446
- );
447
- updateStyleHelper(
448
- theme,
449
- 'color-scheduling-profiler-priority-background',
450
- documentElements,
451
- );
452
- updateStyleHelper(
453
- theme,
454
- 'color-scheduling-profiler-priority-border',
455
- documentElements,
456
- );
457
- updateStyleHelper(
458
- theme,
459
- 'color-scheduling-profiler-user-timing',
460
- documentElements,
461
- );
462
- updateStyleHelper(
463
- theme,
464
- 'color-scheduling-profiler-user-timing-hover',
465
- documentElements,
466
- );
467
- updateStyleHelper(
468
- theme,
469
- 'color-scheduling-profiler-react-idle',
470
- documentElements,
471
- );
472
- updateStyleHelper(
473
- theme,
474
- 'color-scheduling-profiler-react-idle-hover',
475
- documentElements,
476
- );
477
- updateStyleHelper(
478
- theme,
479
- 'color-scheduling-profiler-react-render',
480
- documentElements,
481
- );
482
- updateStyleHelper(
483
- theme,
484
- 'color-scheduling-profiler-react-render-hover',
485
- documentElements,
486
- );
487
- updateStyleHelper(
488
- theme,
489
- 'color-scheduling-profiler-react-commit',
490
- documentElements,
491
- );
492
- updateStyleHelper(
493
- theme,
494
- 'color-scheduling-profiler-react-commit-hover',
495
- documentElements,
496
- );
497
- updateStyleHelper(
498
- theme,
499
- 'color-scheduling-profiler-react-layout-effects',
500
- documentElements,
501
- );
502
- updateStyleHelper(
503
- theme,
504
- 'color-scheduling-profiler-react-layout-effects-hover',
505
- documentElements,
506
- );
507
- updateStyleHelper(
508
- theme,
509
- 'color-scheduling-profiler-react-passive-effects',
510
- documentElements,
511
- );
512
- updateStyleHelper(
513
- theme,
514
- 'color-scheduling-profiler-react-passive-effects-hover',
515
- documentElements,
516
- );
517
- updateStyleHelper(
518
- theme,
519
- 'color-scheduling-profiler-react-schedule',
520
- documentElements,
521
- );
522
- updateStyleHelper(
523
- theme,
524
- 'color-scheduling-profiler-react-schedule-hover',
525
- documentElements,
526
- );
527
- updateStyleHelper(
528
- theme,
529
- 'color-scheduling-profiler-react-suspense-rejected-event',
530
- documentElements,
531
- );
532
- updateStyleHelper(
533
- theme,
534
- 'color-scheduling-profiler-react-suspense-rejected-hover',
535
- documentElements,
536
- );
537
- updateStyleHelper(
538
- theme,
539
- 'color-scheduling-profiler-react-suspense-resolved',
540
- documentElements,
541
- );
542
- updateStyleHelper(
543
- theme,
544
- 'color-scheduling-profiler-react-suspense-resolved-hover',
545
- documentElements,
546
- );
547
- updateStyleHelper(
548
- theme,
549
- 'color-scheduling-profiler-react-suspense-unresolved',
550
- documentElements,
551
- );
552
- updateStyleHelper(
553
- theme,
554
- 'color-scheduling-profiler-react-suspense-unresolved-hover',
555
- documentElements,
556
- );
557
- updateStyleHelper(
558
- theme,
559
- 'color-scheduling-profiler-react-work-border',
560
- documentElements,
561
- );
562
- updateStyleHelper(theme, 'color-scroll-caret', documentElements);
563
- updateStyleHelper(theme, 'color-shadow', documentElements);
564
- updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
565
- updateStyleHelper(theme, 'color-text', documentElements);
566
- updateStyleHelper(theme, 'color-text-invalid', documentElements);
567
- updateStyleHelper(theme, 'color-text-selected', documentElements);
568
- updateStyleHelper(theme, 'color-toggle-background-invalid', documentElements);
569
- updateStyleHelper(theme, 'color-toggle-background-on', documentElements);
570
- updateStyleHelper(theme, 'color-toggle-background-off', documentElements);
571
- updateStyleHelper(theme, 'color-toggle-text', documentElements);
572
- updateStyleHelper(theme, 'color-tooltip-background', documentElements);
573
- updateStyleHelper(theme, 'color-tooltip-text', documentElements);
574
- updateStyleHelper(theme, 'color-warning-background', documentElements);
575
- updateStyleHelper(theme, 'color-warning-background-hover', documentElements);
576
- updateStyleHelper(theme, 'color-warning-text-color', documentElements);
577
- updateStyleHelper(
578
- theme,
579
- 'color-warning-text-color-inverted',
580
- documentElements,
581
- );
582
-
583
- // Font smoothing varies based on the theme.
584
- updateStyleHelper(theme, 'font-smoothing', documentElements);
585
-
272
// Update scrollbar color to match theme.
273
// this CSS property is currently only supported in Firefox,
274
// but it makes a significant UI improvement in dark mode.
@@ -591,6 +277,12 @@ export function updateThemeVariables(
277
// $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
278
documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
279
});
280
+
281
+ // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
282
+ // Because Portals render in a different DOM subtree, these variables don't propagate.
283
+ // So we need to also set @reach/tooltip specific styles on the root.
284
+ updateStyleHelper(theme, 'color-tooltip-background', documentElements);
285
+ updateStyleHelper(theme, 'color-tooltip-text', documentElements);
286
}
287
288
export {SettingsContext, SettingsContextController};
packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
new
+29
@@ -0,0 +1,29 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import * as React from 'react';
11
+import {useContext, useMemo} from 'react';
12
+import {SettingsContext} from './Settings/SettingsContext';
13
+import {THEME_STYLES} from '../../constants';
14
+
15
+export default function ThemeProvider({children}: {|children: React$Node|}) {
16
+ const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
17
+
18
+ const style = useMemo(
19
+ () => ({
20
+ width: '100%',
21
+ height: '100%',
22
+ ...THEME_STYLES[displayDensity],
23
+ ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
24
+ }),
25
+ [theme, browserTheme, displayDensity],
26
+ );
27
+
28
+ return <div style={style}>{children}</div>;
29
+}
packages/react-devtools-shared/src/devtools/views/portaledContent.js
+9
-1
@@ -12,6 +12,7 @@ import {useContext} from 'react';
12
import {createPortal} from 'react-dom';
13
import ErrorBoundary from './ErrorBoundary';
14
import {StoreContext} from './context';
15
+import ThemeProvider from './ThemeProvider';
16
17
export type Props = {portalContainer?: Element, ...};
18
@@ -21,12 +22,19 @@ export default function portaledContent(
22
return function PortaledContent({portalContainer, ...rest}: Props) {
23
const store = useContext(StoreContext);
24
24
- const children = (
25
+ let children = (
26
<ErrorBoundary store={store}>
27
<Component {...rest} />
28
</ErrorBoundary>
29
);
30
31
+ if (portalContainer != null) {
32
+ // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
33
+ // Because Portals render in a different DOM subtree, these variables don't propagate.
34
+ // So in this case, we need to re-wrap portaled content in a second ThemeProvider.
35
+ children = <ThemeProvider>{children}</ThemeProvider>;
36
+ }
37
+
38
return portalContainer != null
39
? createPortal(children, portalContainer)
40
: children;
packages/react-devtools-shared/src/devtools/views/root.css
+1
-259
@@ -1,283 +1,25 @@
1
:root {
2
- /**
3
- * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()
4
- */
2
3
/* Light theme */
7
- --light-color-attribute-name: #ef6632;
8
- --light-color-attribute-name-not-editable: #23272f;
9
- --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
10
- --light-color-attribute-value: #1a1aa6;
11
- --light-color-attribute-value-inverted: #ffffff;
12
- --light-color-attribute-editable-value: #1a1aa6;
13
- --light-color-background: #ffffff;
14
- --light-color-background-hover: rgba(0, 136, 250, 0.1);
15
- --light-color-background-inactive: #e5e5e5;
16
- --light-color-background-invalid: #fff0f0;
17
- --light-color-background-selected: #0088fa;
18
- --light-color-button-background: #ffffff;
19
- --light-color-button-background-focus: #ededed;
20
- --light-color-button: #5f6673;
21
- --light-color-button-disabled: #cfd1d5;
22
- --light-color-button-active: #0088fa;
23
- --light-color-button-focus: #23272f;
24
- --light-color-button-hover: #23272f;
25
- --light-color-border: #eeeeee;
26
- --light-color-commit-did-not-render-fill: #cfd1d5;
27
- --light-color-commit-did-not-render-fill-text: #000000;
28
- --light-color-commit-did-not-render-pattern: #cfd1d5;
29
- --light-color-commit-did-not-render-pattern-text: #333333;
30
- --light-color-commit-gradient-0: #37afa9;
31
- --light-color-commit-gradient-1: #63b19e;
32
- --light-color-commit-gradient-2: #80b393;
33
- --light-color-commit-gradient-3: #97b488;
34
- --light-color-commit-gradient-4: #abb67d;
35
- --light-color-commit-gradient-5: #beb771;
36
- --light-color-commit-gradient-6: #cfb965;
37
- --light-color-commit-gradient-7: #dfba57;
38
- --light-color-commit-gradient-8: #efbb49;
39
- --light-color-commit-gradient-9: #febc38;
40
- --light-color-commit-gradient-text: #000000;
41
- --light-color-component-name: #6a51b2;
42
- --light-color-component-name-inverted: #ffffff;
43
- --light-color-component-badge-background: rgba(0, 0, 0, 0.1);
44
- --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
45
- --light-color-component-badge-count: #777d88;
46
- --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
47
- --light-color-console-error-badge-text: #ffffff;
48
- --light-color-console-error-background: #fff0f0;
49
- --light-color-console-error-border: #ffd6d6;
50
- --light-color-console-error-icon: #eb3941;
51
- --light-color-console-error-text: #fe2e31;
52
- --light-color-console-warning-badge-text: #000000;
53
- --light-color-console-warning-background: #fffbe5;
54
- --light-color-console-warning-border: #fff5c1;
55
- --light-color-console-warning-icon: #f4bd00;
56
- --light-color-console-warning-text: #64460c;
57
- --light-color-context-background: rgba(0,0,0,.9);
58
- --light-color-context-background-hover: rgba(255, 255, 255, 0.1);
59
- --light-color-context-background-selected: #178fb9;
60
- --light-color-context-border: #3d424a;
61
- --light-color-context-text: #ffffff;
62
- --light-color-context-text-selected: #ffffff;
63
- --light-color-dim: #777d88;
64
- --light-color-dimmer: #cfd1d5;
65
- --light-color-dimmest: #eff0f1;
66
- --light-color-error-background: hsl(0, 100%, 97%);
67
- --light-color-error-border: hsl(0, 100%, 92%);
68
- --light-color-error-text: #ff0000;
69
- --light-color-expand-collapse-toggle: #777d88;
70
- --light-color-link: #0000ff;
71
- --light-color-modal-background: rgba(255, 255, 255, 0.75);
72
- --light-color-bridge-version-npm-background: #eff0f1;
73
- --light-color-bridge-version-npm-text: #000000;
74
- --light-color-bridge-version-number: #0088fa;
75
- --light-color-primitive-hook-badge-background: #e5e5e5;
76
- --light-color-primitive-hook-badge-text: #5f6673;
77
- --light-color-record-active: #fc3a4b;
78
- --light-color-record-hover: #3578e5;
79
- --light-color-record-inactive: #0088fa;
80
- --light-color-resize-bar: #eeeeee;
81
- --light-color-resize-bar-active: #dcdcdc;
82
- --light-color-resize-bar-border: #d1d1d1;
83
- --light-color-resize-bar-dot: #333333;
84
- --light-color-scheduling-profiler-native-event: #ccc;
85
- --light-color-scheduling-profiler-native-event-hover: #aaa;
86
- --light-color-scheduling-profiler-priority-background: #f6f6f6;
87
- --light-color-scheduling-profiler-priority-border: #eeeeee;
88
- --light-color-scheduling-profiler-user-timing: #c9cacd;
89
- --light-color-scheduling-profiler-user-timing-hover: #93959a;
90
- --light-color-scheduling-profiler-react-idle: #d3e5f6;
91
- --light-color-scheduling-profiler-react-idle-hover: #c3d9ef;
92
- --light-color-scheduling-profiler-react-render: #9fc3f3;
93
- --light-color-scheduling-profiler-react-render-hover: #83afe9;
94
- --light-color-scheduling-profiler-react-commit: #c88ff0;
95
- --light-color-scheduling-profiler-react-commit-hover: #b281d6;
96
- --light-color-scheduling-profiler-react-layout-effects: #b281d6;
97
- --light-color-scheduling-profiler-react-layout-effects-hover: #9d71bd;
98
- --light-color-scheduling-profiler-react-passive-effects: #b281d6;
99
- --light-color-scheduling-profiler-react-passive-effects-hover: #9d71bd;
100
- --light-color-scheduling-profiler-react-schedule: #9fc3f3;
101
- --light-color-scheduling-profiler-react-schedule-hover: #2683E2;
102
- --light-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
103
- --light-color-scheduling-profiler-react-suspense-rejected-hover: #ffdf37;
104
- --light-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
105
- --light-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
106
- --light-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
107
- --light-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
108
- --light-color-scheduling-profiler-text-color: #000000;
109
- --light-color-scheduling-profiler-react-work-border: #ffffff;
4
--light-color-scroll-thumb: #c2c2c2;
5
--light-color-scroll-track: #fafafa;
112
- --light-color-search-match: yellow;
113
- --light-color-search-match-current: #f7923b;
114
- --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
115
- --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
116
- --light-color-scroll-caret: rgba(150, 150, 150, 0.5);
117
- --light-color-tab-selected-border: #0088fa;
118
- --light-color-text: #000000;
119
- --light-color-text-invalid: #ff0000;
120
- --light-color-text-selected: #ffffff;
121
- --light-color-toggle-background-invalid: #fc3a4b;
122
- --light-color-toggle-background-on: #0088fa;
123
- --light-color-toggle-background-off: #cfd1d5;
124
- --light-color-toggle-text: #ffffff;
6
--light-color-tooltip-background: rgba(0, 0, 0, 0.9);
7
--light-color-tooltip-text: #ffffff;
127
- --light-color-warning-background: #fb3655;
128
- --light-color-warning-background-hover: #f82042;
129
- --light-color-warning-text-color: #ffffff;
130
- --light-color-warning-text-color-inverted: #fd4d69;
8
9
/* Dark theme */
133
- --dark-color-attribute-name: #9d87d2;
134
- --dark-color-attribute-name-not-editable: #ededed;
135
- --dark-color-attribute-name-inverted: #282828;
136
- --dark-color-attribute-value: #cedae0;
137
- --dark-color-attribute-value-inverted: #ffffff;
138
- --dark-color-attribute-editable-value: yellow;
139
- --dark-color-background: #282c34;
140
- --dark-color-background-hover: rgba(255, 255, 255, 0.1);
141
- --dark-color-background-inactive: #3d424a;
142
- --dark-color-background-invalid: #5c0000;
143
- --dark-color-background-selected: #178fb9;
144
- --dark-color-button-background: #282c34;
145
- --dark-color-button-background-focus: #3d424a;
146
- --dark-color-button: #afb3b9;
147
- --dark-color-button-active: #61dafb;
148
- --dark-color-button-disabled: #4f5766;
149
- --dark-color-button-focus: #a2e9fc;
150
- --dark-color-button-hover: #ededed;
151
- --dark-color-border: #3d424a;
152
- --dark-color-commit-did-not-render-fill: #777d88;
153
- --dark-color-commit-did-not-render-fill-text: #000000;
154
- --dark-color-commit-did-not-render-pattern: #666c77;
155
- --dark-color-commit-did-not-render-pattern-text: #ffffff;
156
- --dark-color-commit-gradient-0: #37afa9;
157
- --dark-color-commit-gradient-1: #63b19e;
158
- --dark-color-commit-gradient-2: #80b393;
159
- --dark-color-commit-gradient-3: #97b488;
160
- --dark-color-commit-gradient-4: #abb67d;
161
- --dark-color-commit-gradient-5: #beb771;
162
- --dark-color-commit-gradient-6: #cfb965;
163
- --dark-color-commit-gradient-7: #dfba57;
164
- --dark-color-commit-gradient-8: #efbb49;
165
- --dark-color-commit-gradient-9: #febc38;
166
- --dark-color-commit-gradient-text: #000000;
167
- --dark-color-component-name: #61dafb;
168
- --dark-color-component-name-inverted: #282828;
169
- --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
170
- --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
171
- --dark-color-component-badge-count: #8f949d;
172
- --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
173
- --dark-color-console-error-badge-text: #000000;
174
- --dark-color-console-error-background: #290000;
175
- --dark-color-console-error-border: #5c0000;
176
- --dark-color-console-error-icon: #eb3941;
177
- --dark-color-console-error-text: #fc7f7f;
178
- --dark-color-console-warning-badge-text: #000000;
179
- --dark-color-console-warning-background: #332b00;
180
- --dark-color-console-warning-border: #665500;
181
- --dark-color-console-warning-icon: #f4bd00;
182
- --dark-color-console-warning-text: #f5f2ed;
183
- --dark-color-context-background: rgba(255,255,255,.95);
184
- --dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
185
- --dark-color-context-background-selected: #0088fa;
186
- --dark-color-context-border: #eeeeee;
187
- --dark-color-context-text: #000000;
188
- --dark-color-context-text-selected: #ffffff;
189
- --dark-color-dim: #8f949d;
190
- --dark-color-dimmer: #777d88;
191
- --dark-color-dimmest: #4f5766;
192
- --dark-color-error-background: #200;
193
- --dark-color-error-border: #900;
194
- --dark-color-error-text: #f55;
195
- --dark-color-expand-collapse-toggle: #8f949d;
196
- --dark-color-link: #61dafb;
197
- --dark-color-modal-background: rgba(0, 0, 0, 0.75);
198
- --dark-color-bridge-version-npm-background: rgba(0, 0, 0, 0.25);
199
- --dark-color-bridge-version-npm-text: #ffffff;
200
- --dark-color-bridge-version-number: yellow;
201
- --dark-color-primitive-hook-badge-background: rgba(0, 0, 0, 0.25);
202
- --dark-color-primitive-hook-badge-text: rgba(255, 255, 255, 0.7);
203
- --dark-color-record-active: #fc3a4b;
204
- --dark-color-record-hover: #a2e9fc;
205
- --dark-color-record-inactive: #61dafb;
206
- --dark-color-resize-bar: #282c34;
207
- --dark-color-resize-bar-active: #31363f;
208
- --dark-color-resize-bar-border: #3d424a;
209
- --dark-color-resize-bar-dot: #cfd1d5;
210
- --dark-color-scheduling-profiler-native-event: #b2b2b2;
211
- --dark-color-scheduling-profiler-native-event-hover: #949494;
212
- --dark-color-scheduling-profiler-priority-background: #1d2129;
213
- --dark-color-scheduling-profiler-priority-border: #282c34;
214
- --dark-color-scheduling-profiler-user-timing: #c9cacd;
215
- --dark-color-scheduling-profiler-user-timing-hover: #93959a;
216
- --dark-color-scheduling-profiler-react-idle: #3d485b;
217
- --dark-color-scheduling-profiler-react-idle-hover: #465269;
218
- --dark-color-scheduling-profiler-react-render: #2683E2;
219
- --dark-color-scheduling-profiler-react-render-hover: #1a76d4;
220
- --dark-color-scheduling-profiler-react-commit: #731fad;
221
- --dark-color-scheduling-profiler-react-commit-hover: #611b94;
222
- --dark-color-scheduling-profiler-react-layout-effects: #611b94;
223
- --dark-color-scheduling-profiler-react-layout-effects-hover: #51167a;
224
- --dark-color-scheduling-profiler-react-passive-effects: #611b94;
225
- --dark-color-scheduling-profiler-react-passive-effects-hover: #51167a;
226
- --dark-color-scheduling-profiler-react-schedule: #2683E2;
227
- --dark-color-scheduling-profiler-react-schedule-hover: #1a76d4;
228
- --dark-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
229
- --dark-color-scheduling-profiler-react-suspense-rejected-hover: #e4c00f;
230
- --dark-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
231
- --dark-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
232
- --dark-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
233
- --dark-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
234
- --dark-color-scheduling-profiler-text-color: #000000;
235
- --dark-color-scheduling-profiler-react-work-border: #ffffff;
10
--dark-color-scroll-thumb: #afb3b9;
11
--dark-color-scroll-track: #313640;
238
- --dark-color-search-match: yellow;
239
- --dark-color-search-match-current: #f7923b;
240
- --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
241
- --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
242
- --dark-color-scroll-caret: #4f5766;
243
- --dark-color-shadow: rgba(0, 0, 0, 0.5);
244
- --dark-color-tab-selected-border: #178fb9;
245
- --dark-color-text: #ffffff;
246
- --dark-color-text-invalid: #ff8080;
247
- --dark-color-text-selected: #ffffff;
248
- --dark-color-toggle-background-invalid: #fc3a4b;
249
- --dark-color-toggle-background-on: #178fb9;
250
- --dark-color-toggle-background-off: #777d88;
251
- --dark-color-toggle-text: #ffffff;
12
--dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
13
--dark-color-tooltip-text: #000000;
254
- --dark-color-warning-background: #ee1638;
255
- --dark-color-warning-background-hover: #da1030;
256
- --dark-color-warning-text-color: #ffffff;
257
- --dark-color-warning-text-color-inverted: #ee1638;
14
15
/* Font smoothing */
260
- --light-font-smoothing: auto;
261
- --dark-font-smoothing: antialiased;
16
--font-smoothing: auto;
17
18
/* Compact density */
265
- --compact-font-size-monospace-small: 9px;
266
- --compact-font-size-monospace-normal: 11px;
267
- --compact-font-size-monospace-large: 15px;
268
- --compact-font-size-sans-small: 10px;
269
- --compact-font-size-sans-normal: 12px;
270
- --compact-font-size-sans-large: 14px;
19
--compact-line-height-data: 18px;
20
--compact-root-font-size: 16px;
21
22
/* Comfortable density */
275
- --comfortable-font-size-monospace-small: 10px;
276
- --comfortable-font-size-monospace-normal: 13px;
277
- --comfortable-font-size-monospace-large: 17px;
278
- --comfortable-font-size-sans-small: 12px;
279
- --comfortable-font-size-sans-normal: 14px;
280
- --comfortable-font-size-sans-large: 16px;
23
--comfortable-line-height-data: 22px;
24
--comfortable-root-font-size: 20px;
25
@@ -286,4 +28,4 @@
28
Courier, monospace;
29
--font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
30
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
289
-}
31
+}
\ No newline at end of file