From dfe7e8f64744277b4e3493cc4ccc1f212c863f15 Mon Sep 17 00:00:00 2001
From: Thang Vu <hi@thvu.dev>
Date: Wed, 29 Jan 2025 16:45:56 +0700
Subject: [PATCH] docs: dark mode for DocSearch (#12564)

---
 docs/components/DocSearch/index.tsx   |  8 --------
 docs/components/DocSearch/wrapper.tsx | 11 +++++++++++
 docs/pages/global.css                 |  6 ++++++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/docs/components/DocSearch/index.tsx b/docs/components/DocSearch/index.tsx
index ea4c8eb20f..b351cdd26c 100644
--- a/docs/components/DocSearch/index.tsx
+++ b/docs/components/DocSearch/index.tsx
@@ -4,14 +4,6 @@ const DocSearch = dynamic(
   () => import("./wrapper").then((mod) => mod.default),
   {
     ssr: false,
-    loading: () => (
-      <div className="relative h-8 w-48 appearance-none rounded-lg bg-black/[.05] px-3 py-1.5 pr-2 text-base leading-tight text-gray-500 transition-colors focus:!bg-transparent max-md:ml-6 md:text-sm dark:bg-gray-50/10 dark:text-gray-400">
-        Search...
-        <kbd className="pointer-events-none absolute right-0 top-0 my-1.5 flex h-5 select-none items-center gap-1 rounded border bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 transition-opacity contrast-more:border-current contrast-more:text-current max-sm:hidden ltr:right-1.5 rtl:left-1.5 dark:border-gray-100/20 dark:bg-black/50 contrast-more:dark:border-current">
-          CTRL K
-        </kbd>
-      </div>
-    ),
   }
 )
 
diff --git a/docs/components/DocSearch/wrapper.tsx b/docs/components/DocSearch/wrapper.tsx
index 8b06b94b9b..8cf99acbc2 100644
--- a/docs/components/DocSearch/wrapper.tsx
+++ b/docs/components/DocSearch/wrapper.tsx
@@ -1,8 +1,19 @@
 import { DocSearch } from "@docsearch/react"
+import { useTheme } from "nextra-theme-docs"
+import { useEffect } from "react"
 
 import "@docsearch/css"
 
 function App() {
+  const { resolvedTheme } = useTheme()
+
+  useEffect(() => {
+    if (resolvedTheme) {
+      // hack to get DocSearch to use dark mode colors if applicable
+      document.documentElement.setAttribute("data-theme", resolvedTheme)
+    }
+  }, [resolvedTheme])
+
   return (
     <DocSearch
       appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!}
diff --git a/docs/pages/global.css b/docs/pages/global.css
index fd5200cff4..656ca8824c 100644
--- a/docs/pages/global.css
+++ b/docs/pages/global.css
@@ -279,3 +279,9 @@ html > head:has(meta[content*="reference/core/providers"]) + body .provider {
   font-size: 1rem;
   color: #000 !important;
 }
+
+.nextra-sidebar-container {
+  .DocSearch-Button {
+    @apply hidden;
+  }
+}