[DevTools] Make Toggle hover state more visible (#32914)
This change adds a background color to Toggles to make them easier to see. This is especially important when DevTools are not in focus, and it's harder to see. Test plan: 1. `yarn build:chrome:local` 2. Inspect components 3. Hover over "Select an Element in page to inspect it" 4. Observe background change
Jorge (Hezi) Cohen committed
Apr 15, 2025 at 11:20 UTC
707b3fc6b2d7db1aaea6545e06672873e70685d5
2 files changed
+9
packages/react-devtools-shared/src/devtools/constants.js
+2
@@ -27,6 +27,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
27
'--color-background-selected': '#0088fa',
28
'--color-button-background': '#ffffff',
29
'--color-button-background-focus': '#ededed',
30
+ '--color-button-background-hover': 'rgba(0, 0, 0, 0.2)',
31
'--color-button': '#5f6673',
32
'--color-button-disabled': '#cfd1d5',
33
'--color-button-active': '#0088fa',
@@ -174,6 +175,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
175
'--color-background-selected': '#178fb9',
176
'--color-button-background': '#282c34',
177
'--color-button-background-focus': '#3d424a',
178
+ '--color-button-background-hover': 'rgba(255, 255, 255, 0.2)',
179
'--color-button': '#afb3b9',
180
'--color-button-active': '#61dafb',
181
'--color-button-disabled': '#4f5766',
packages/react-devtools-shared/src/devtools/views/Toggle.css
+7
@@ -20,10 +20,17 @@
20
background: var(--color-button-background);
21
color: var(--color-button);
22
}
23
+
24
.ToggleOff:hover {
25
color: var(--color-button-hover);
26
}
27
28
+.ToggleOn:hover,
29
+.ToggleOff:hover {
30
+ background-color: var(--color-button-background-hover);
31
+}
32
+
33
+
34
.ToggleOn,
35
.ToggleOn:active {
36
color: var(--color-button-active);