fix: WEB-631 Update color of docsearch-searchbox-bg (#6209)

* Update color of docsearch-searchbox-bg * add docsearchbox bg to themings
prisma · Aug 14, 2024 · f59a9a6 · f59a9a6
1 parent 2d79108
commit f59a9a6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/css/docsearch.css b/src/css/docsearch.css
@@ -96,7 +96,7 @@ html[data-theme="dark"] {
   /* Modal */
   --docsearch-modal-background: #090a15;
   /* Search box */
-  --docsearch-searchbox-background: var(--ifm-background-color);
+  --docsearch-searchbox-background: var(--gray-900) !important;
   --docsearch-searchbox-focus-background: var(--gray-800) !important;
   /* Hit */
   --docsearch-hit-color: var(--ifm-font-color-base);
@@ -121,7 +121,7 @@ html[data-theme="dark"] {
     --docsearch-footer-shadow: 0px -4px 8px 0px #00000033, 0px 1px 0px 0px #494c6a80 inset;
     --docsearch-modal-shadow: 0px 3px 8px 0px #000309, 1px 1px 0px 0px #2c2e40 inset;
     --docsearch-muted-color: var(--gray-500);
-    --docsearch-searchbox-background: var(--ifm-background-color);
+    --docsearch-searchbox-background: var(--gray-900) !important;
 
     --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
       0 2px 2px 0 rgba(3, 4, 9, 0.3);

diff --git a/src/css/theming.css b/src/css/theming.css
@@ -5,6 +5,7 @@
 }
 
 :root {
+  --docsearch-searchbox-background: var(--ifm-color-secondary);
   --docsearch-modal-width: 1248px;
   --ifm-color-primary: #2e8555;
   --ifm-color-primary-dark: #29784c;
@@ -159,6 +160,7 @@
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 /* PRIMITES WITH THEME DEFINED BY TOGGLER */
 html[data-theme="dark"] {
+  --docsearch-searchbox-background: var(--gray-900) !important;
   --ifm-blockquote-border-color: transparent;
   --ifm-color-primary: #25c2a0;
   --ifm-color-primary-dark: #21af90;
@@ -251,6 +253,7 @@ html[data-theme="dark"] {
 @media (prefers-color-scheme: dark) {
   /* Theme: Dark OS + Light docs = Light docs */
   :root[data-theme="light"] {
+    --docsearch-searchbox-background: var(--ifm-color-secondary);
     --ifm-color-primary: #2e8555;
     --ifm-background-color: #fff;
     --ifm-color-primary-dark: #29784c;
@@ -377,6 +380,7 @@ html[data-theme="dark"] {
   }
 
   :root[data-theme="dark"] {
+    --docsearch-searchbox-background: var(--gray-900) !important;
     --ifm-color-primary: #25c2a0;
     --ifm-color-primary-dark: #21af90;
     --ifm-color-primary-darker: #1fa588;