Skip to content

Commit fb3b9ea

Browse files
authored
fix[react-devtools] component badge in light mode is now not invisible (#29852)
In light mode, component badges in profiler were invisible due to using the alpha channel to produce the grayish color. Instead I'm using the equivalent RGB without that alpha. **before** In light mode, component badges in profiler were invisible (forwardRef badge in this case): ![Screenshot 2024-06-11 at 13 15 16](https://github.com/facebook/react/assets/5188459/385b80a5-d385-4eac-bac6-7fec6938d78f) **after** Profiler tooltip fix. also notice there's no regression on the right menu: ![Screenshot 2024-06-11 at 13 04 41](https://github.com/facebook/react/assets/5188459/64aa27f7-35b8-4e3b-91d4-c12d5a97330e) also works in dark mode: ![Screenshot 2024-06-11 at 13 12 17](https://github.com/facebook/react/assets/5188459/99aa55fd-23ee-4881-9676-63eca86bf761) Still visible in components in light mode, whether selected or not: ![Screenshot 2024-06-11 at 13 04 49](https://github.com/facebook/react/assets/5188459/59c0bf63-d9b0-4d46-a145-f615249d1da0) components dark mode: ![Screenshot 2024-06-11 at 13 10 25](https://github.com/facebook/react/assets/5188459/16e61acc-c431-4bfa-8a65-ca6701f4379b)
1 parent c015abd commit fb3b9ea

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

packages/react-devtools-shared/src/devtools/constants.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
5050
'--color-commit-gradient-text': '#000000',
5151
'--color-component-name': '#6a51b2',
5252
'--color-component-name-inverted': '#ffffff',
53-
'--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',
53+
'--color-component-badge-background': '#e6e6e6',
5454
'--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
5555
'--color-component-badge-count': '#777d88',
5656
'--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',

0 commit comments

Comments
 (0)