docs: dark mode for DocSearch (#12564)

Author: ThangHuuVu

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>
-    ),
   }
 )
 

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!}

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;
+  }
+}