From ab8009b7711257f3feb908ba3d54682372c18374 Mon Sep 17 00:00:00 2001
From: Koray Tuncer <78158735+koraytuncer@users.noreply.github.com>
Date: Wed, 23 Jul 2025 20:13:04 +0300
Subject: [PATCH] fix : Docs search not adjusted to dark mode (#2381) (#2443)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
---
 .changeset/tricky-moons-laugh.md |  5 +++
 docs/scss/docs.scss              | 75 ++++++++++++++++++++++++++++++++
 package.json                     |  4 +-
 pnpm-lock.yaml                   |  2 +-
 4 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/tricky-moons-laugh.md

diff --git a/.changeset/tricky-moons-laugh.md b/.changeset/tricky-moons-laugh.md
new file mode 100644
index 000000000..eeafd99a8
--- /dev/null
+++ b/.changeset/tricky-moons-laugh.md
@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix Docs search in dark mode
diff --git a/docs/scss/docs.scss b/docs/scss/docs.scss
index 72c116955..0e5d10697 100644
--- a/docs/scss/docs.scss
+++ b/docs/scss/docs.scss
@@ -3,6 +3,7 @@
 :root {
   --docsearch-primary-color: var(--tblr-primary);
   --docsearch-searchbox-background: var(--tblr-bg-surface);
+  --docsearch-searchbox-focus-background: var(--tblr-bg-surface);
   --docsearch-text-color: var(--tblr-body-text);
   --docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
   --docsearch-key-gradient: var(--tblr-bg-surface-secondary);
@@ -25,6 +26,80 @@
   transition: all 0.2s ease-in-out;
 }
 
+.DocSearch-SearchBar {
+  display: flex;
+  padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
+  background-color: var(--tblr-bg-surface) !important;
+}
+
+.DocSearch-Hit-source {
+  background: none !important;
+}
+
+.DocSearch-Dropdown {
+  background-color: var(--tblr-bg-surface) !important;
+}
+
+.DocSearch-Hit a {
+  background-color: var(--tblr-bg-surface-secondary) !important;
+  border: 1px solid var(--tblr-border-color) !important;
+  color: var(--tblr-body-color) !important;
+  box-shadow: none !important;
+  
+  &:hover {
+    background-color: var(--tblr-bg-surface-tertiary) !important;
+    border-color: var(--tblr-border-color-active) !important;
+  }
+}
+
+.DocSearch-Hit-Container {
+  color: var(--tblr-body-color) !important;
+}
+
+.DocSearch-Hit-title {
+  color: var(--tblr-body-color) !important;
+}
+
+.DocSearch-Hit-path {
+  color: var(--tblr-muted) !important;
+}
+
+.DocSearch-Hit[aria-selected="true"] a {
+  background-color: var(--tblr-primary) !important;
+  border-color: var(--tblr-primary) !important;
+  color: var(--tblr-primary-fg) !important;
+}
+
+.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Container,
+.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title,
+.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path {
+  color: var(--tblr-primary-fg) !important;
+}
+
+.DocSearch-Modal {
+  background-color: var(--tblr-bg-surface) !important;
+  box-shadow: var(--tblr-shadow-dropdown) !important;
+}
+
+.DocSearch-Form {
+  background-color: var(--tblr-bg-surface-secondary) !important;
+  border: 1px solid var(--tblr-border-color) !important;
+}
+
+.DocSearch-Input {
+  color: var(--tblr-body-color) !important;
+  
+  &::placeholder {
+    color: var(--tblr-muted) !important;
+  }
+}
+
+.DocSearch-Footer {
+  background-color: var(--tblr-bg-surface) !important;
+  border-top: 1px solid var(--tblr-border-color) !important;
+  box-shadow: none !important;
+}
+
 .DocSearch-Button-Key {
   top: 0;
 }
diff --git a/package.json b/package.json
index 61a3882f9..62fe0fbc4 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "glob": "^11.0.3",
     "js-beautify": "^1.15.4",
     "nodemon": "^3.1.10",
-    "pnpm": "10.6.5",
+    "pnpm": "^10.6.5",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "prettier": "^3.6.2",
@@ -49,4 +49,4 @@
     "terser": "^5.43.1",
     "turbo": "^2.5.4"
   }
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 257a789ec..04b8527d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,7 +67,7 @@ importers:
         specifier: ^3.1.10
         version: 3.1.10
       pnpm:
-        specifier: 10.6.5
+        specifier: ^10.6.5
         version: 10.6.5
       postcss:
         specifier: ^8.5.6