fix(devtools): update menu list css

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css

@@ -76,24 +76,32 @@
 .Modal[data-reach-menu-list] {
   display: inline-flex;
   flex-direction: column;
-  background-color: var(--color-background);
-  color: var(--color-button);
   padding: 0.25rem 0;
   padding-right: 0;
-  border: 1px solid var(--color-border);
   border-radius: 0.25rem;
   max-height: 10rem;
   overflow: auto;
 
   /* Make sure this is above the DevTools, which are above the Overlay */
   z-index: 10000002;
   position: relative;
-
   /* Reach UI tries to set its own :( */
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
 }
 
+.ModalDark {
+  background-color: var(--dark-color-background);
+  border: 1px solid var(--dark-color-border);
+  color: var(--dark-color-button);
+}
+
+.ModalLight {
+  background-color: var(--light-color-background);
+  border: 1px solid var(--light-color-border);
+  color: var(--light-color-button);
+}
+
 .NotInStore,
 .NotInStore:hover {
   color: var(--color-dimmest);

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js

@@ -30,6 +30,7 @@ import {StoreContext} from '../context';
 import type {SerializedElement} from './types';
 
 import styles from './OwnersStack.css';
+import {SettingsContext} from '../Settings/SettingsContext';
 
 type SelectOwner = (owner: SerializedElement | null) => void;
 
@@ -208,6 +209,8 @@ function ElementsDropdown({
   selectOwner,
 }: ElementsDropdownProps) {
   const store = useContext(StoreContext);
+  const {theme, browserTheme} = useContext(SettingsContext);
+  const isLightTheme = (theme === 'auto' ? browserTheme : theme) === 'light';
 
   const menuItems = [];
   for (let index = owners.length - 1; index >= 0; index--) {
@@ -238,7 +241,12 @@ function ElementsDropdown({
           </span>
         </Tooltip>
       </MenuButton>
-      <MenuList className={styles.Modal}>{menuItems}</MenuList>
+      <MenuList
+        className={`${styles.Modal} ${
+          isLightTheme ? styles.ModalLight : styles.ModalDark
+        }`}>
+        {menuItems}
+      </MenuList>
     </Menu>
   );
 }

packages/react-devtools-shared/src/devtools/views/root.css

@@ -10,12 +10,18 @@
   --light-color-scroll-track: #fafafa;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
+  --light-color-background: #ffffff;
+  --light-color-border: #eeeeee;
+  --light-color-button: #5f6673;
 
   /* Dark theme */
   --dark-color-scroll-thumb: #afb3b9;
   --dark-color-scroll-track: #313640;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
   --dark-color-tooltip-text: #000000;
+  --dark-color-background: #282c34;
+  --dark-color-border: #3d424a;
+  --dark-color-button: #afb3b9;
 
   /* Font smoothing */
   --font-smoothing: auto;
@@ -33,4 +39,4 @@
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-}
+}