Fix dark mode visibility issues across documentation site

- Configure dual themes for Shiki syntax highlighting (github-light/github-dark)
- Add CSS overrides for code blocks to ensure proper dark mode colors
- Fix Card component headings with explicit dark mode text colors
- Configure Mermaid with proper dark theme support and text colors
- Add CSS overrides for Mermaid flowchart edges and arrow markers
- Ensure proper contrast in both light (#333) and dark (#ccc) modes

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

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

Author: groksrc

astro.config.mjs

@@ -8,11 +8,27 @@ import mermaid from 'astro-mermaid';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [mdx(), react(), pagefind(), mermaid()],
+  integrations: [mdx(), react(), pagefind(), mermaid({
+    themes: {
+      light: 'default',
+      dark: 'base'
+    },
+    mermaidConfig: {
+      themeVariables: {
+        darkMode: true,
+        primaryTextColor: '#f3f4f6',
+        secondaryTextColor: '#e5e7eb',
+        tertiaryTextColor: '#d1d5db'
+      }
+    }
+  })],
   markdown: {
     syntaxHighlight: 'shiki',
     shikiConfig: {
-      theme: 'github-light',
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark'
+      },
       wrap: false
     }
   }

src/components/Card.tsx

@@ -28,7 +28,7 @@ export default function Card({ title, icon, href, children, className }: CardPro
           </div>
         )}
         <div className="flex-1">
-          <h3 className="mb-2 text-lg font-medium leading-none tracking-tight">
+          <h3 className="mb-2 text-lg font-medium leading-none tracking-tight text-gray-900 dark:text-gray-100">
             {title}
           </h3>
           {children && (

src/styles/global.css

@@ -82,8 +82,7 @@
   }
 
   p {
-    @apply leading-7 [&:not(:first-child)]:mt-6;
-    color: #3e3e3e;
+    @apply leading-7 [&:not(:first-child)]:mt-6 text-gray-700 dark:text-gray-300;
     font-size: 16px;
   }
 
@@ -100,7 +99,7 @@
   }
 
   li {
-    color: #3e3e3e;
+    @apply text-gray-700 dark:text-gray-300;
   }
 
   code {
@@ -171,6 +170,42 @@
     @apply bg-gray-200 dark:bg-gray-800 px-1 rounded;
   }
 
+  /* Override inline styles for Shiki code blocks in dark mode */
+  .dark pre.astro-code {
+    background-color: rgb(17 24 39) !important; /* dark:bg-gray-900 */
+  }
+  
+  .dark pre.astro-code,
+  .dark pre.astro-code span {
+    color: rgb(243 244 246) !important; /* dark:text-gray-100 */
+  }
+  
+  /* Preserve token colors in dark mode */
+  .dark pre.astro-code .token.keyword {
+    color: rgb(147 197 253) !important; /* blue-300 */
+  }
+  
+  .dark pre.astro-code .token.string {
+    color: rgb(134 239 172) !important; /* green-300 */
+  }
+  
+  .dark pre.astro-code .token.comment {
+    color: rgb(156 163 175) !important; /* gray-400 */
+  }
+  
+  .dark pre.astro-code .token.function {
+    color: rgb(252 211 77) !important; /* yellow-300 */
+  }
+  
+  .dark pre.astro-code .token.number {
+    color: rgb(251 146 60) !important; /* orange-400 */
+  }
+  
+  .dark pre.astro-code .token.operator,
+  .dark pre.astro-code .token.punctuation {
+    color: rgb(209 213 219) !important; /* gray-300 */
+  }
+
   a {
     @apply font-medium text-primary hover:text-primary/80;
   }
@@ -268,4 +303,30 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+
+  /* Prevent Tailwind dark mode styles from affecting Mermaid diagrams */
+  .mermaid p {
+    color: inherit !important;
+  }
+
+  /* Mermaid line colors for light and dark modes */
+  .mermaid .flowchart-link {
+    stroke: #333333 !important;
+  }
+
+  .dark .mermaid .flowchart-link {
+    stroke: #cccccc !important;
+  }
+
+  /* Mermaid arrow markers for light and dark modes */
+  .mermaid marker path {
+    fill: #333333 !important;
+    stroke: #333333 !important;
+  }
+
+  .dark .mermaid marker path {
+    fill: #cccccc !important;
+    stroke: #cccccc !important;
+  }
+
 }