diff --git a/docs/site/src/components/API/api-ref/refnav.js b/docs/site/src/components/API/api-ref/refnav.js
index e88b41d0233..c4637fef76e 100644
--- a/docs/site/src/components/API/api-ref/refnav.js
+++ b/docs/site/src/components/API/api-ref/refnav.js
@@ -41,10 +41,9 @@ const RefNav = (props) => {
                 .map((method) => {
                   return (
                     <Link
-                      className={`menu__link font-medium block hover:no-underline text-base ${page === method.name && 'menu__link--active'}`}
+                      className={`menu__link font-medium block  hover:no-underline text-base ${page === method.name && 'menu__link--active'}`}
                       key={`link-${method.name.toLowerCase()}`}
                       href={`#${method.name.toLowerCase()}`}
-                      data-theme="dark"
                       onClick={() => setPage(method.name)}
                     >
                       {method.name}
diff --git a/docs/site/src/css/custom.css b/docs/site/src/css/custom.css
index 59c5136435d..1ddaebaae8e 100644
--- a/docs/site/src/css/custom.css
+++ b/docs/site/src/css/custom.css
@@ -129,14 +129,14 @@
 
 [data-theme="dark"] .menu__link--active {
   font-weight: bold;
-  color: white;
+  color: #3b82f6;
 }
 
 @media (min-width: 997px) {
   [data-theme="light"] .menu__link:hover,
   [data-theme="light"] .menu__link--active{
     font-weight: bold;
-    color: var(--ifm-menu-color)
+    color: #3b82f6
   }
 }
 @media (max-width: 996px) {
@@ -148,7 +148,7 @@
   [data-theme="light"] .menu__list-item-collapsible--active,
   [data-theme="light"] .menu__link--active {
     font-weight: bold;
-    color: white;
+    color: #3b82f6;
   }
 
   [data-theme="light"] .menu__list-item-collapsible:hover,