fix search input colors

Author: meodai

src/components/Common/Search/Search.tsx

@@ -138,7 +138,7 @@ const Search: FC<{ onClose: () => void }> = ({ onClose }) => {
                 />
                 <input
                   // type="search"
-                  className="block border-none tw-lead-sm bg-transparent py-[22px] px-4 pl-14 w-full focus:outline-none"
+                  className="mainsearchinput block border-none tw-lead-sm bg-transparent py-[22px] px-4 pl-14 w-full focus:outline-none"
                   placeholder="Search for anything"
                   ref={inputRef}
                   value={term}

src/css/custom.scss

@@ -76,7 +76,7 @@ html[data-theme='dark']:root, /* we did this so the darkmode does not affect any
 
     --ifm-menu-color: #fff;
 
-    --ic0-nav-border: 1px solid white;
+    --ic0-nav-border: 1px solid #151515;
     --ic0-article-background: linear-gradient(180deg, #f5f5f5 0%, #f2eff6 100%);
     --ic0-docs-background: #151515;
 
@@ -119,6 +119,18 @@ html[data-theme='dark']:root, /* we did this so the darkmode does not affect any
       .tabs-container {
         color: #000;
       }
+
+      .navbar__search-button {
+        border-color: #fff;
+        color: #fff;
+        span {
+          color: #fff;
+        }
+      }
+
+      .mainsearchinput {
+        color: #000
+      }
   }
 
   .navbar {

src/theme/SearchBar/index.js

@@ -51,7 +51,8 @@ const Search = () => {
       <button
         className="
           navbar__search-button group
-          border-none md:border-2 md:border-solid md:border-infinite/50 md:rounded-xl md:docs:border-black
+          border-none md:border-2 md:border-solid md:border-infinite/50 md:rounded-xl 
+          md:docs:border-black
           bg-transparent px-2 md:px-5 py-1 md:py-2
           font-circular md:text-infinite md:docs:text-black
           flex gap-2 items-center

tailwind.config.js

@@ -317,4 +317,5 @@ module.exports = {
     }),
   ],
   corePlugins: { preflight: false },
+  darkMode: ["class", '[data-theme="dark"]'],
 };