From afebdcf64c137bf9230d5f8561329fcdc2ef0344 Mon Sep 17 00:00:00 2001
From: numan <97672144+numanhg@users.noreply.github.com>
Date: Sat, 11 Oct 2025 19:12:11 +0100
Subject: [PATCH] fix: bottom search bar dark mode styles (#1614)

---
 client/styles/colors.scss | 14 ++++++++++++++
 client/styles/theme.scss  | 20 ++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/client/styles/colors.scss b/client/styles/colors.scss
index a8ee4af5..dd22a4c9 100644
--- a/client/styles/colors.scss
+++ b/client/styles/colors.scss
@@ -192,6 +192,20 @@
     color: var(--editor-panels-bottom-color);
     background-color: var(--editor-panels-bottom-background-color);
     border-top: var(--editor-panels-bottom-border-color) 1px solid;
+
+    .cm-search {
+      .cm-textfield {
+        background-color: var(--editor-panels-bottom-input-background-color);
+      }
+      .cm-button {
+        background-image: var(--editor-panels-bottom-button-background-image);
+        &:active {
+          background-image: var(
+            --editor-panels-bottom-button-active-background-image
+          );
+        }
+      }
+    }
   }
 
   .cm-editor .cm-tooltip-autocomplete {
diff --git a/client/styles/theme.scss b/client/styles/theme.scss
index 1abd2c45..86320083 100644
--- a/client/styles/theme.scss
+++ b/client/styles/theme.scss
@@ -132,6 +132,16 @@ html {
   --editor-directive-color: #696969;
   --editor-directive-background-color: #ebebeb7d;
 
+  --editor-panels-bottom-input-background-color: #fff;
+  --editor-panels-bottom-button-background-image: linear-gradient(
+    #eff1f5,
+    #d9d9df
+  );
+  --editor-panels-bottom-button-active-background-image: linear-gradient(
+    #b4b4b4,
+    #d0d3d6
+  );
+
   --ui-font:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
     Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -281,6 +291,16 @@ html[data-theme="dark"] {
   --editor-directive-mark-color: #ba0303;
   --editor-directive-color: #898989;
   --editor-directive-background-color: #4c4c4c7d;
+
+  --editor-panels-bottom-input-background-color: inherit;
+  --editor-panels-bottom-button-background-image: linear-gradient(
+    #393939,
+    #111
+  );
+  --editor-panels-bottom-button-active-background-image: linear-gradient(
+    #111,
+    #333
+  );
 }
 
 html[data-markdown-syntax-rendering="on"] {