From 5664e5a30fe051711d1e641fc482fac08fb2d75d Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zenomilan@me.com>
Date: Tue, 14 Jan 2025 12:09:04 +0100
Subject: [PATCH] Fix variant dropdown styling in header (#2730)

---
 .changeset/wicked-apricots-drop.md            |  5 +++++
 .../gitbook/src/components/Header/Header.tsx  | 21 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wicked-apricots-drop.md

diff --git a/.changeset/wicked-apricots-drop.md b/.changeset/wicked-apricots-drop.md
new file mode 100644
index 0000000000..2c4f4d4558
--- /dev/null
+++ b/.changeset/wicked-apricots-drop.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix variant dropdown styling in header
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index a1a8a95457..8c8cc8af7c 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -107,7 +107,26 @@ export function Header(props: {
 
                         {isMultiVariants && (
                             <div className="hidden page-no-toc:flex mr-auto">
-                                <SpacesDropdown space={space} spaces={spaces} />
+                                <SpacesDropdown
+                                    space={space}
+                                    spaces={spaces}
+                                    className={
+                                        !isCustomizationDefault
+                                            ? `bg-header-link/2 text-header-link ring-header-link/4 
+                                            dark:bg-header-link/2 dark:text-header-link dark:ring-header-link/4 
+                                            group-hover/dropdown:bg-header-link/3 group-hover/dropdown:text-header-link group-hover/dropdown:ring-header-link/6
+                                            dark:group-hover/dropdown:bg-header-link/3 dark:group-hover/dropdown:text-header-link dark:group-hover/dropdown:ring-header-link/6
+                                            group-focus-within/dropdown:bg-header-link/3 group-focus-within/dropdown:text-header-link group-focus-within/dropdown:ring-header-link/6
+                                            dark:group-focus-within/dropdown:bg-header-link/3 dark:group-focus-within/dropdown:text-header-link dark:group-focus-within/dropdown:ring-header-link/6
+                                            
+                                            contrast-more:bg-header-background contrast-more:text-header-link contrast-more:ring-header-link
+                                            contrast-more:group-hover/dropdown:text-header-link contrast-more:group-hover/dropdown:ring-header-link
+                                            contrast-more:dark:group-hover/dropdown:text-header-link contrast-more:dark:group-hover/dropdown:ring-header-link
+                                            contrast-more:group-focus-within/dropdown:text-header-link contrast-more:group-focus-within/dropdown:ring-header-link
+                                            contrast-more:dark:group-focus-within/dropdown:text-header-link contrast-more:dark:group-focus-within/dropdown:ring-header-link`
+                                            : ''
+                                    }
+                                />
                             </div>
                         )}