diff --git a/src/css/custom.css b/src/css/custom.css
index 5aab7356..5ec5b85b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -23,6 +23,7 @@ html[data-theme="dark"] {
   --ifm-font-color-base: theme("colors.gray.50");
   --ifm-navbar-search-input-placeholder-color: theme("colors.gray.500");
   --ifm-card-background-color: theme("colors.blue.900");
+  --docsearch-primary-color: theme("colors.blue.900");
 }
 
 html[data-theme="light"] {
diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx
index 3a13eb1e..b5ce0866 100644
--- a/src/theme/Navbar/Content/index.tsx
+++ b/src/theme/Navbar/Content/index.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import clsx from "clsx";
+
 import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common";
 import { splitNavbarItems } from "@docusaurus/theme-common/internal";
 import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem";
@@ -7,6 +9,8 @@ import SearchBar from "@theme/SearchBar";
 import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
 import NavbarLogo from "@theme/Navbar/Logo";
 
+import styles from "./styles.module.css";
+
 function NavbarItems({ items }: { items: NavbarItemConfig[] }) {
   return (
     <>
@@ -38,7 +42,7 @@ export default function NavbarContent() {
         </div>
       </div>
 
-      <div className="flex items-center gap-6">
+      <div className={clsx(styles.navbarContent, "flex", "items-center", "gap-6")}>
         <SearchBar />
 
         <div className="items-center gap-6 hidden xl:flex">
diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css
new file mode 100644
index 00000000..d3ee0866
--- /dev/null
+++ b/src/theme/Navbar/Content/styles.module.css
@@ -0,0 +1,3 @@
+.navbarContent {
+  --ifm-color-primary: theme("colors.brand.500");
+}
\ No newline at end of file