From 0b6ddca981eb12e37ec283338cf552bcccd04d81 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zenomilan@me.com>
Date: Thu, 19 Dec 2024 13:28:13 +0200
Subject: [PATCH] Fix variant selector for non-default themes (#2649)

---
 .changeset/serious-dancers-clean.md           |  5 +++++
 .../gitbook/src/components/Header/Header.tsx  | 20 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/serious-dancers-clean.md

diff --git a/.changeset/serious-dancers-clean.md b/.changeset/serious-dancers-clean.md
new file mode 100644
index 000000000..8bdef2303
--- /dev/null
+++ b/.changeset/serious-dancers-clean.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix variant selector contrast for non-default themes
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 37bf182da..82f15a06a 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -95,7 +95,25 @@ export function Header(props: {
                             <HeaderLogo site={site} space={space} customization={customization} />
                             {!hasSiteSections && isMultiVariants ? (
                                 <div className="z-20 shrink hidden sm:block">
-                                    <SpacesDropdown space={space} spaces={spaces} />
+                                    <SpacesDropdown
+                                        className={tcls(
+                                            !isCustomizationDefault &&
+                                                withTopHeader && [
+                                                    'bg-header-link/2',
+                                                    'dark:bg-header-link/2',
+                                                    'text-header-link/8',
+                                                    'dark:text-header-link/8',
+                                                    'ring-1',
+                                                    'ring-header-link/4',
+                                                    'dark:ring-header-link/4',
+                                                    'contrast-more:bg-header-background',
+                                                    'contrast-more:text-header-link',
+                                                    'contrast-more:ring-header-link',
+                                                ],
+                                        )}
+                                        space={space}
+                                        spaces={spaces}
+                                    />
                                 </div>
                             ) : null}
                         </div>