From b2c2b1531643bef385394615c3a8a7bd25802f2b Mon Sep 17 00:00:00 2001
From: Ashton Anderson <ashton@cs.toronto.edu>
Date: Sat, 28 Mar 2026 13:30:25 -0400
Subject: [PATCH] fix: keep Edge analysis selects on dark surfaces

---
 src/components/Analysis/BroadcastGameList.tsx     |  2 +-
 src/components/Analysis/ConfigureAnalysis.tsx     |  8 ++------
 src/components/Analysis/Highlight.tsx             |  4 ++--
 src/components/Common/GameInfo.tsx                |  2 +-
 src/components/Common/PlaySetupModal.tsx          |  4 ++--
 src/components/Openings/OpeningSelectionModal.tsx |  4 ++--
 src/styles/tailwind.css                           | 14 +++++++++-----
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/Analysis/BroadcastGameList.tsx b/src/components/Analysis/BroadcastGameList.tsx
index 66301194..e9167917 100644
--- a/src/components/Analysis/BroadcastGameList.tsx
+++ b/src/components/Analysis/BroadcastGameList.tsx
@@ -96,7 +96,7 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
             id="round-selector"
             value={selectedRoundId}
             onChange={(e) => handleRoundChange(e.target.value)}
-            className="w-full rounded-md border border-glass-border bg-glass px-2 py-1 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-human-4"
+            className="edge-dark-select w-full rounded-md border border-glass-border bg-glass px-2 py-1 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-human-4"
           >
             {broadcastController.currentBroadcast.rounds.map((round) => (
               <option key={round.id} value={round.id}>
diff --git a/src/components/Analysis/ConfigureAnalysis.tsx b/src/components/Analysis/ConfigureAnalysis.tsx
index 01bc49ae..13d67586 100644
--- a/src/components/Analysis/ConfigureAnalysis.tsx
+++ b/src/components/Analysis/ConfigureAnalysis.tsx
@@ -45,15 +45,11 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         <div className="relative inline-flex w-full items-center">
           <select
             value={currentMaiaModel}
-            className="w-full cursor-pointer appearance-none rounded border border-glass-border bg-glass py-[5px] pl-2.5 pr-6 text-xs text-white/90 outline-none transition duration-200 hover:bg-glass-stronger"
+            className="edge-dark-select w-full cursor-pointer appearance-none rounded border border-glass-border bg-glass py-[5px] pl-2.5 pr-6 text-xs text-white/90 outline-none transition duration-200 hover:bg-glass-stronger"
             onChange={(e) => setCurrentMaiaModel(e.target.value)}
           >
             {MAIA_MODELS.map((model) => (
-              <option
-                value={model}
-                key={model}
-                className="bg-transparent text-white"
-              >
+              <option value={model} key={model}>
                 {model.replace('maia_kdd_', 'Maia ')}
               </option>
             ))}
diff --git a/src/components/Analysis/Highlight.tsx b/src/components/Analysis/Highlight.tsx
index 04533145..3019eafc 100644
--- a/src/components/Analysis/Highlight.tsx
+++ b/src/components/Analysis/Highlight.tsx
@@ -427,7 +427,7 @@ export const Highlight: React.FC<Props> = ({
                       ref={maiaHeaderSelectRef}
                       value={currentMaiaModel}
                       onChange={(e) => setCurrentMaiaModel(e.target.value)}
-                      className="pointer-events-none absolute inset-0 h-full w-full appearance-none opacity-0"
+                      className="edge-dark-select pointer-events-none absolute inset-0 h-full w-full appearance-none opacity-0"
                     >
                       {MAIA_MODELS.map((model) => (
                         <option
@@ -448,7 +448,7 @@ export const Highlight: React.FC<Props> = ({
                     ref={maiaHeaderSelectRef}
                     value={currentMaiaModel}
                     onChange={(e) => setCurrentMaiaModel(e.target.value)}
-                    className={`cursor-pointer appearance-none bg-transparent text-center ${splitTitleTextClass} text-human-1 outline-none transition-colors duration-200 hover:text-human-1/80`}
+                    className={`edge-dark-select cursor-pointer appearance-none bg-transparent text-center ${splitTitleTextClass} text-human-1 outline-none transition-colors duration-200 hover:text-human-1/80`}
                   >
                     {MAIA_MODELS.map((model) => (
                       <option
diff --git a/src/components/Common/GameInfo.tsx b/src/components/Common/GameInfo.tsx
index f6e14381..aed7c799 100644
--- a/src/components/Common/GameInfo.tsx
+++ b/src/components/Common/GameInfo.tsx
@@ -82,7 +82,7 @@ export const GameInfo: React.FC<Props> = ({
                   <select
                     ref={maiaSelectRef}
                     value={currentMaiaModel}
-                    className="maia-native-select cursor-pointer appearance-none bg-transparent leading-none focus:outline-none"
+                    className="edge-dark-select cursor-pointer appearance-none bg-transparent leading-none focus:outline-none"
                     onChange={(e) => setCurrentMaiaModel(e.target.value)}
                   >
                     {MAIA_MODELS?.map((model) => (
diff --git a/src/components/Common/PlaySetupModal.tsx b/src/components/Common/PlaySetupModal.tsx
index f1526338..7cafc17f 100644
--- a/src/components/Common/PlaySetupModal.tsx
+++ b/src/components/Common/PlaySetupModal.tsx
@@ -297,7 +297,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                       <select
                         id="partner-select"
                         value={maiaPartnerVersion}
-                        className="maia-native-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
+                        className="edge-dark-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
                         onChange={(e) => setMaiaPartnerVersion(e.target.value)}
                       >
                         {maiaOptions.map((maia) => (
@@ -327,7 +327,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                   <select
                     id="opponent-select"
                     value={maiaVersion}
-                    className="maia-native-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
+                    className="edge-dark-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
                     onChange={(e) => setMaiaVersion(e.target.value)}
                   >
                     {maiaOptions.map((maia) => (
diff --git a/src/components/Openings/OpeningSelectionModal.tsx b/src/components/Openings/OpeningSelectionModal.tsx
index 99b83fdc..c7d4f960 100644
--- a/src/components/Openings/OpeningSelectionModal.tsx
+++ b/src/components/Openings/OpeningSelectionModal.tsx
@@ -1121,7 +1121,7 @@ const DrillStudioPanel: React.FC<{
                       setSelectedMaiaVersion(version)
                     }
                   }}
-                  className="maia-native-select w-full rounded-md border border-white/[0.08] bg-white/[0.06] px-2.5 py-[8px] text-[14px] text-white/90 focus:outline-none"
+                  className="edge-dark-select w-full rounded-md border border-white/[0.08] bg-white/[0.06] px-2.5 py-[8px] text-[14px] text-white/90 focus:outline-none"
                 >
                   {MAIA3_OPPONENT_RATINGS.map((version) => (
                     <option key={version.id} value={version.id}>
@@ -1402,7 +1402,7 @@ const SelectedPanel: React.FC<{
               setSelectedMaiaVersion(version)
             }
           }}
-          className="maia-native-select w-full rounded border border-glass-border bg-white/5 p-2 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20 md:text-sm"
+          className="edge-dark-select w-full rounded border border-glass-border bg-white/5 p-2 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20 md:text-sm"
         >
           {MAIA3_OPPONENT_RATINGS.map((version) => (
             <option key={version.id} value={version.id}>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 602e3356..3a9902b0 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -185,11 +185,15 @@ svg {
   background-color: rgb(var(--color-human-accent4));
 }
 
-.maia-native-select option,
-.maia-native-select optgroup {
-  background-color: rgb(255 255 255);
-  color: rgb(17 24 39);
-  -webkit-text-fill-color: rgb(17 24 39);
+.edge-dark-select {
+  color-scheme: dark;
+}
+
+.edge-dark-select option,
+.edge-dark-select optgroup {
+  background-color: rgb(var(--color-backdrop));
+  color: rgb(var(--color-text-primary));
+  -webkit-text-fill-color: rgb(var(--color-text-primary));
 }
 
 .spinner {