From 8ef7cdb2e5a1c4b4837b63a2594c904abad952d7 Mon Sep 17 00:00:00 2001 From: Deven14125 Date: Fri, 20 Mar 2026 10:13:28 +0530 Subject: [PATCH 1/5] Add DocSearch button key theme styles Introduce .DocSearch-Button-Key styles for light and dark themes: apply text, background, and border colors using Tailwind @apply with important modifiers. The dark variant targets [data-theme="dark"] to ensure search key tokens are visible and consistent across themes. --- src/styles/tailwind.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 7fa6a69f7831..338c0ab2829c 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -47,6 +47,12 @@ .DocSearch-Button-Keys { @apply hidden! lg:flex!; } +.DocSearch-Button-Key { + @apply text-gray-700! bg-gray-100! border-gray-300!; +} +[data-theme="dark"] .DocSearch-Button-Key { + @apply text-gray-100! bg-olive-700! border-gray-500!; +} .DocSearch-Button .DocSearch-Search-Icon { @apply text-white! lg:text-gray-100!; } From 51522a1abfe8ca3ee6c220648b8e6ff7e079da80 Mon Sep 17 00:00:00 2001 From: Deven14125 Date: Fri, 20 Mar 2026 21:21:23 +0530 Subject: [PATCH 2/5] Use dark: utilities for DocSearch key styles Merge the separate [data-theme="dark"] rule into the main .DocSearch-Button-Key selector by using Tailwind's dark: utilities. This consolidates light and dark styles into one rule and changes the dark background from bg-olive-700 to bg-gray-700 for consistency. --- src/styles/tailwind.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 338c0ab2829c..576557f7ed60 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -48,10 +48,7 @@ @apply hidden! lg:flex!; } .DocSearch-Button-Key { - @apply text-gray-700! bg-gray-100! border-gray-300!; -} -[data-theme="dark"] .DocSearch-Button-Key { - @apply text-gray-100! bg-olive-700! border-gray-500!; + @apply text-gray-700! bg-gray-100! border-gray-300! dark:text-gray-100! dark:bg-gray-700! dark:border-gray-500!; } .DocSearch-Button .DocSearch-Search-Icon { @apply text-white! lg:text-gray-100!; From 9a08b68a66a58c321c785683f52353d8e8ce8444 Mon Sep 17 00:00:00 2001 From: Deven14125 Date: Fri, 20 Mar 2026 21:46:57 +0530 Subject: [PATCH 3/5] Use blue bg for DocSearch button in dark mode Change .DocSearch-Button-Key dark mode background from gray-700 to blue-400 in src/styles/tailwind.css to adjust the button appearance in dark theme (improves visibility/brand consistency). --- src/styles/tailwind.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 576557f7ed60..bc23b219caa1 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -48,7 +48,7 @@ @apply hidden! lg:flex!; } .DocSearch-Button-Key { - @apply text-gray-700! bg-gray-100! border-gray-300! dark:text-gray-100! dark:bg-gray-700! dark:border-gray-500!; + @apply text-gray-700! bg-gray-100! border-gray-300! dark:text-gray-100! dark:bg-blue-400! dark:border-gray-500!; } .DocSearch-Button .DocSearch-Search-Icon { @apply text-white! lg:text-gray-100!; From 393bc83fda278ceb0bfaa9164af57cc9dc3aa558 Mon Sep 17 00:00:00 2001 From: Deven14125 Date: Sat, 21 Mar 2026 18:25:03 +0530 Subject: [PATCH 4/5] Adjust DocSearch button dark theme colors Refine dark-mode styles for .DocSearch-Button-Key in tailwind.css: change dark:text to gray-900, dark:bg to gray-200, and dark:border to gray-400 to improve contrast and better match the site's dark theme. --- src/styles/tailwind.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index bc23b219caa1..d9aceb4b4819 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -48,7 +48,7 @@ @apply hidden! lg:flex!; } .DocSearch-Button-Key { - @apply text-gray-700! bg-gray-100! border-gray-300! dark:text-gray-100! dark:bg-blue-400! dark:border-gray-500!; + @apply text-gray-700! bg-gray-100! border-gray-300! dark:text-gray-900! dark:bg-gray-200! dark:border-gray-400!; } .DocSearch-Button .DocSearch-Search-Icon { @apply text-white! lg:text-gray-100!; From 64ac30f2dcd49c5d2ff32679c258bde8415ca0c5 Mon Sep 17 00:00:00 2001 From: Deven14125 Date: Wed, 25 Mar 2026 21:07:12 +0530 Subject: [PATCH 5/5] Add dark theme styles for DocSearch modal Introduce dark-mode CSS for the DocSearch modal by adding a set of CSS custom properties under [data-theme="dark"] .DocSearch-Modal (colors, backgrounds, shadows, muted/logo colors, footer and hit styles). Also style command/escape keys for dark mode and tweak .DocSearch-Button-Key dark variant to use black text on white background with white border to improve contrast in dark theme. --- src/styles/tailwind.css | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index d2b8f76855a8..3a6f4d6996dc 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -35,6 +35,33 @@ :root { --docsearch-primary-color: #1d78c1 !important; } + +[data-theme="dark"] .DocSearch-Modal { + --docsearch-text-color: #d8dee9; + --docsearch-container-background: rgba(4, 6, 12, 0.78); + --docsearch-modal-background: #060a14; + --docsearch-modal-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); + --docsearch-searchbox-background: #090f1c; + --docsearch-searchbox-focus-background: #0f172a; + --docsearch-hit-background: #0a1020; + --docsearch-hit-color: #d1d5db; + --docsearch-hit-shadow: none; + --docsearch-footer-background: #090f1c; + --docsearch-footer-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06); + --docsearch-muted-color: #9aa5bb; + --docsearch-logo-color: #f8fafc; +} + +[data-theme="dark"] .DocSearch-Modal .DocSearch-Commands-Key { + background: #ffffff; + color: #000000; + border: 1px solid #ffffff; +} + +[data-theme="dark"] .DocSearch-Modal .DocSearch-Escape-Key { + color: #000000; +} + .DocSearch-Button { @apply bg-transparent! lg:bg-gray-500! transition! duration-200! lg:rounded-full!; } @@ -48,7 +75,7 @@ @apply hidden! lg:flex!; } .DocSearch-Button-Key { - @apply text-gray-700! bg-gray-100! border-gray-300! dark:text-gray-900! dark:bg-gray-200! dark:border-gray-400!; + @apply text-gray-700! bg-gray-100! border-gray-300! dark:text-black! dark:bg-white! dark:border-white!; } .DocSearch-Button .DocSearch-Search-Icon { @apply text-white! lg:text-gray-100!;