From 3a22cb56b55a60536c333995ad42139e89651d09 Mon Sep 17 00:00:00 2001
From: Jorge Cohen <jorgecohen@meta.com>
Date: Tue, 15 Apr 2025 11:00:02 +0100
Subject: [PATCH] [DevTools] Make Toggle hover state more visible

---
 packages/react-devtools-shared/src/devtools/constants.js   | 2 ++
 .../react-devtools-shared/src/devtools/views/Toggle.css    | 7 +++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js
index 8824003ec3742..cfa3d5af1648b 100644
--- a/packages/react-devtools-shared/src/devtools/constants.js
+++ b/packages/react-devtools-shared/src/devtools/constants.js
@@ -27,6 +27,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-background-selected': '#0088fa',
     '--color-button-background': '#ffffff',
     '--color-button-background-focus': '#ededed',
+    '--color-button-background-hover': 'rgba(0, 0, 0, 0.2)',
     '--color-button': '#5f6673',
     '--color-button-disabled': '#cfd1d5',
     '--color-button-active': '#0088fa',
@@ -174,6 +175,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-background-selected': '#178fb9',
     '--color-button-background': '#282c34',
     '--color-button-background-focus': '#3d424a',
+    '--color-button-background-hover': 'rgba(255, 255, 255, 0.2)',
     '--color-button': '#afb3b9',
     '--color-button-active': '#61dafb',
     '--color-button-disabled': '#4f5766',
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.css b/packages/react-devtools-shared/src/devtools/views/Toggle.css
index 85cfe09f81ff5..1cb6450f748ff 100644
--- a/packages/react-devtools-shared/src/devtools/views/Toggle.css
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.css
@@ -20,10 +20,17 @@
   background: var(--color-button-background);
   color: var(--color-button);
 }
+
 .ToggleOff:hover {
   color: var(--color-button-hover);
 }
 
+.ToggleOn:hover,
+.ToggleOff:hover {
+ background-color: var(--color-button-background-hover);
+}
+
+
 .ToggleOn,
 .ToggleOn:active {
   color: var(--color-button-active);