diff --git a/src/css/custom.css b/src/css/custom.css
index 84a17742..5f585514 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -271,6 +271,28 @@ nav[aria-label="Main"] .text-neutral-0, nav[aria-label="Main"] .text-neutral-0:h
     color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+/* Spaces sidebar version selector — @upbound/elements Select uses Tailwind */
+/* utility classes (bg-background, border-input, etc.) that are compiled with */
+/* hardcoded light values and no `.dark:` variants, so dark mode needs explicit overrides. */
+html[data-theme="dark"] .spaces-version-trigger,
+html[data-theme="dark"] .spaces-version-content {
+    background-color: var(--ifm-background-color);
+    border-color: var(--upbound-border-color);
+    color: var(--ifm-font-color-base);
+}
+html[data-theme="dark"] .spaces-version-trigger svg,
+html[data-theme="dark"] .spaces-version-content svg {
+    color: var(--ifm-font-color-base);
+}
+html[data-theme="dark"] .spaces-version-item {
+    color: var(--ifm-font-color-base);
+}
+html[data-theme="dark"] .spaces-version-item:focus,
+html[data-theme="dark"] .spaces-version-item[data-highlighted] {
+    background-color: var(--upbound-light-bg);
+    color: var(--ifm-font-color-base);
+}
+
 /* Navbar dropdown popover - theme agnostic */
 /* Target navigation menu dropdowns rendered via Radix portal */
 /* Dropdown has white background in both modes, so always use dark text */
diff --git a/src/theme/DocSidebar/Desktop/Content/index.js b/src/theme/DocSidebar/Desktop/Content/index.js
index fd0bf37e..0c1ba6cd 100644
--- a/src/theme/DocSidebar/Desktop/Content/index.js
+++ b/src/theme/DocSidebar/Desktop/Content/index.js
@@ -54,12 +54,12 @@ export default function DocSidebarDesktopContentWrapper(props) {
             value={getVersionFromPath(location.pathname)}
             onValueChange={handleVersionChange}
           >
-            <SelectTrigger className={styles.trigger}>
+            <SelectTrigger className={`${styles.trigger} spaces-version-trigger`}>
               <SelectValue />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="spaces-version-content">
               {versions.map((v) => (
-                <SelectItem key={v.value} value={v.value}>
+                <SelectItem key={v.value} value={v.value} className="spaces-version-item">
                   {v.label}
                 </SelectItem>
               ))}
diff --git a/src/theme/Root.js b/src/theme/Root.js
index b42254b8..5fba37f5 100644
--- a/src/theme/Root.js
+++ b/src/theme/Root.js
@@ -24,7 +24,7 @@ export default function Root({ children }) {
   
   useEffect(() => {
     if (!isBrowser) return;
-    
+
     // Add Scarf pixel
     const scarfImg = document.createElement('img');
     scarfImg.referrerPolicy = 'no-referrer-when-downgrade';