Add dark mode support to navigation and layout components

- Fix sidebar navigation colors and hover states for dark mode
- Update table of contents styling with proper dark mode text colors
- Improve search component border colors using CSS variables
- Add dark mode text colors to layout descriptions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: groksrc

src/components/Search.astro

@@ -76,7 +76,7 @@
     font-size: 1rem !important;
     background: hsl(var(--background)) !important;
     background-color: hsl(var(--background)) !important;
-    border: 2px solid hsl(214.3 31.8% 91.4%) !important;
+    border: 2px solid hsl(var(--border)) !important;
     border-radius: 0.375rem !important;
     outline: none !important;
     transition: border-color 0.2s !important;
@@ -90,11 +90,6 @@
     box-shadow: none !important;
   }
 
-  /* Dark mode border color */
-  .dark .pagefind-custom .pagefind-ui__search-input {
-    border-color: hsl(217.2 32.6% 17.5%) !important;
-  }
-
   .pagefind-custom .pagefind-ui__search-input::placeholder {
     color: hsl(var(--muted-foreground));
   }
@@ -139,6 +134,11 @@
     margin-left: 0;
     line-height: 1.4;
   }
+  
+  .pagefind-custom .pagefind-ui__result-title a {
+    color: hsl(var(--muted-foreground));
+    text-decoration: none;
+  }
 
   /* Style nested result titles */
   .pagefind-custom .pagefind-ui__result-nested .pagefind-ui__result-title {

src/components/Sidebar.astro

@@ -15,12 +15,12 @@ const currentPath = Astro.url.pathname
             href={link.href}
             target={link.external ? "_blank" : undefined}
             rel={link.external ? "noopener noreferrer" : undefined}
-            class="flex items-center gap-3 px-3 py-1.5 text-sm text-gray-500 hover:text-gray-900 transition-colors no-underline group"
+            class="flex items-center gap-3 px-3 py-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors no-underline group"
             style="text-decoration: none"
           >
             {link.icon && (
-              <div class="flex items-center justify-center w-6 h-6 rounded-md border border-gray-200 group-hover:bg-black group-hover:border-black transition-all">
-                <Icon name={link.icon} class="w-4 h-4 text-gray-400 group-hover:text-white" />
+              <div class="flex items-center justify-center w-6 h-6 rounded-md border border-gray-200 dark:border-gray-700 group-hover:bg-black dark:group-hover:bg-white group-hover:border-black dark:group-hover:border-white transition-all">
+                <Icon name={link.icon} class="w-4 h-4 text-gray-400 dark:text-gray-500 group-hover:text-white dark:group-hover:text-black" />
               </div>
             )}
             <span>{link.title}</span>
@@ -31,18 +31,18 @@ const currentPath = Astro.url.pathname
       <!-- Regular navigation sections -->
       {navConfig.sidebar.map((section) => (
         <div>
-          <h4 class="text-sm font-medium leading-none tracking-tight text-gray-900 px-3 mb-4 mt-10">
+          <h4 class="text-sm font-medium leading-none tracking-tight text-gray-900 dark:text-gray-100 px-3 mb-4 mt-10">
             {section.title}
           </h4>
           <ul class="space-y-1 list-none m-0 p-0">
             {section.items.map((item) => (
               <li>
                 <a
                   href={item.href}
-                  class={`block text-sm transition-colors hover:text-gray-900 rounded-xl ${
+                  class={`block text-sm transition-colors hover:text-gray-900 dark:hover:text-gray-100 rounded-xl ${
                     currentPath === item.href
-                      ? 'text-gray-900 font-medium bg-[#e8e8e8] px-3.5 py-2'
-                      : 'text-gray-600 font-normal hover:bg-gray-50 px-3 py-1.5'
+                      ? 'text-gray-900 dark:text-gray-100 font-medium bg-[#e8e8e8] dark:bg-gray-800 px-3.5 py-2'
+                      : 'text-gray-600 dark:text-gray-400 font-normal hover:bg-gray-50 dark:hover:bg-gray-800/50 px-3 py-1.5'
                   }`}
                   style="text-decoration: none"
                 >

src/components/TableOfContents.astro

@@ -6,7 +6,7 @@
 <aside class="hidden xl:block w-64 flex-shrink-0">
   <div class="sticky top-20 h-[calc(100vh-5rem)] overflow-y-auto py-6 pl-6">
     <div class="space-y-3">
-      <div class="flex items-center gap-2 text-sm font-medium text-gray-900">
+      <div class="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-gray-100">
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
         </svg>
@@ -57,8 +57,8 @@
       const a = document.createElement('a');
       a.href = `#${id}`;
       a.className = level === 3 
-        ? 'block py-1 pl-4 text-sm text-gray-500 hover:text-gray-900 transition-colors font-normal'
-        : 'block py-1 text-gray-600 hover:text-gray-900 transition-colors';
+        ? 'block py-1 pl-4 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors font-normal'
+        : 'block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors';
       a.style.textDecoration = 'none';
       a.textContent = title;
 

src/layouts/DocsLayout.astro

@@ -25,7 +25,7 @@ const { title, description } = Astro.props.frontmatter || Astro.props
             <Breadcrumb />
             <h1>{title}</h1>
             {description && (
-              <p class="text-lg text-gray-600 mt-2 mb-8">{description}</p>
+              <p class="text-lg text-gray-600 dark:text-gray-400 mt-2 mb-8">{description}</p>
             )}
             <slot />
           </article>