diff --git a/site/index.html b/site/index.html
index 10835bb..cd7412b 100644
--- a/site/index.html
+++ b/site/index.html
@@ -312,6 +312,67 @@
         }
       }
       
+      /* Dark mode styles */
+      html.is-dark .card {
+        background: #1e1e1e;
+        border-color: #404040;
+        color: var(--foreground);
+      }
+      
+      html.is-dark .stat-card {
+        background: #1e1e1e;
+        border-color: #404040;
+        color: var(--foreground);
+      }
+      
+      html.is-dark .timeline-content {
+        background: #1e1e1e;
+        border-color: #404040;
+        color: var(--foreground);
+      }
+      
+      html.is-dark .timeline-avatar {
+        background: #1e1e1e;
+        border-color: #404040;
+      }
+      
+      html.is-dark .card-header {
+        border-bottom-color: #404040;
+      }
+      
+      html.is-dark h1,
+      html.is-dark h2,
+      html.is-dark h3 {
+        color: var(--foreground);
+      }
+      
+      html.is-dark .stat-label {
+        color: var(--foreground);
+      }
+      
+      html.is-dark .timeline-role {
+        color: var(--foreground);
+      }
+      
+      html.is-dark .timeline-dates {
+        color: var(--foreground);
+      }
+      
+      html.is-dark .avatar-card .card-header img {
+        border-color: #404040;
+      }
+      
+      /* Override inline background styles in dark mode */
+      html.is-dark .card[style*="background: #f8f9fa"],
+      html.is-dark .card[style*="background:#f8f9fa"] {
+        background: #1e1e1e !important;
+      }
+      
+      html.is-dark .card[style*="background: #f0f0f0"],
+      html.is-dark .card[style*="background:#f0f0f0"] {
+        background: #1e1e1e !important;
+      }
+      
       /* Timeline styles */
       .timeline {
         position: relative;