diff --git a/.astro/data-store.json b/.astro/data-store.json
index a929187e..0caf6209 100644
--- a/.astro/data-store.json
+++ b/.astro/data-store.json
@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
\ No newline at end of file
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.18.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}"]
\ No newline at end of file
diff --git a/.astro/settings.json b/.astro/settings.json
index 09eaa37f..30734094 100644
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1759260475499
+		"lastUpdateCheck": 1777380175180
 	}
 }
\ No newline at end of file
diff --git a/.astro/types.d.ts b/.astro/types.d.ts
index 03d7cc43..f964fe0c 100644
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
\ No newline at end of file
diff --git a/src/components/App.astro b/src/components/App.astro
index d2b4739a..48110f29 100644
--- a/src/components/App.astro
+++ b/src/components/App.astro
@@ -23,17 +23,19 @@ import SocialShare from './SocialShare.astro';
 
 <style>
   .App {
-    background-color: #0a0a0a;
+    background-color: var(--bg-primary);
     text-align: center;
     display: flex;
     justify-content: center;
     flex-direction: column;
     min-height: 100vh;
+    transition: background-color 0.3s ease;
   }
 
   .App-header {
     padding: 20px;
-    color: white;
+    color: var(--text-primary);
+    transition: color 0.3s ease;
   }
 
   .App-header a {
diff --git a/src/components/DarkModeToggle.astro b/src/components/DarkModeToggle.astro
new file mode 100644
index 00000000..2f66fa50
--- /dev/null
+++ b/src/components/DarkModeToggle.astro
@@ -0,0 +1,126 @@
+---
+// Dark mode toggle component
+---
+
+<button class="dark-mode-toggle" id="darkModeToggle" aria-label="Toggle dark mode">
+  <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+  <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
+</button>
+
+<script>
+  // Initialize dark mode
+  function initDarkMode() {
+    const toggle = document.getElementById('darkModeToggle');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+    
+    // Check localStorage or system preference
+    const isDarkMode = localStorage.getItem('darkMode') === 'true' ||
+                      (localStorage.getItem('darkMode') === null && prefersDark.matches);
+    
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+
+    // Toggle dark mode on button click
+    toggle?.addEventListener('click', () => {
+      const isDark = document.documentElement.classList.toggle('dark');
+      localStorage.setItem('darkMode', isDark);
+    });
+
+    // Listen for system preference changes
+    prefersDark.addEventListener('change', (e) => {
+      if (localStorage.getItem('darkMode') === null) {
+        if (e.matches) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+      }
+    });
+  }
+
+  // Run on page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initDarkMode);
+  } else {
+    initDarkMode();
+  }
+</script>
+
+<style>
+  .dark-mode-toggle {
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    width: 40px;
+    height: 40px;
+  }
+
+  .dark-mode-toggle:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.dark) .dark-mode-toggle:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .dark-mode-toggle svg {
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  .sun-icon {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+
+  .moon-icon {
+    opacity: 0;
+    transform: rotate(-180deg);
+  }
+
+  :global(.dark) .sun-icon {
+    opacity: 0;
+    transform: rotate(180deg);
+  }
+
+  :global(.dark) .moon-icon {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+
+  @media (max-width: 768px) {
+    .dark-mode-toggle {
+      width: 36px;
+      height: 36px;
+    }
+
+    .dark-mode-toggle svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+</style>
diff --git a/src/components/IssueList.astro b/src/components/IssueList.astro
index a04b60a4..ac674ee8 100644
--- a/src/components/IssueList.astro
+++ b/src/components/IssueList.astro
@@ -131,7 +131,7 @@ if (repoInfo) {
             </div>
           </div>
           <div class="Issue-Labels">
-            <span class="Issue-Label {issue.priority === 'good first issue' ? 'good-first-issue' : 'help-wanted'}">
+            <span class={`Issue-Label ${issue.priority === 'good first issue' ? 'good-first-issue' : 'help-wanted'}`}>
               {issue.priority === 'good first issue' ? 'Good First Issue' : 'Help Wanted'}
             </span>
           </div>
@@ -152,6 +152,15 @@ if (repoInfo) {
     margin-top: 1rem;
     padding-top: 1rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
+    transition: border-color 0.3s ease;
+  }
+
+  :global(.dark) .Card-Issues {
+    border-top-color: rgba(255, 255, 255, 0.1);
+  }
+
+  :global:not(.dark) .Card-Issues {
+    border-top-color: rgba(0, 0, 0, 0.1);
   }
 
   .Issues-Header {
@@ -164,7 +173,7 @@ if (repoInfo) {
   .Issues-Title {
     font-size: 0.9rem;
     font-weight: 600;
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--text-primary);
     margin: 0;
   }
 
@@ -193,39 +202,63 @@ if (repoInfo) {
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     text-decoration: none;
-    color: inherit;
+    color: var(--text-primary);
     transition: all 0.2s ease;
     gap: 0.75rem;
   }
 
+  :global(.dark) .Issue-Card {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  :global:not(.dark) .Issue-Card {
+    background: rgba(0, 0, 0, 0.03);
+    border-color: rgba(0, 0, 0, 0.1);
+  }
+
   .Issue-Card:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(102, 126, 234, 0.3);
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shavar(--text-primary);
+    margin: 0 0 0.5rem 0;
+    line-height: 1.4;
+    font-weight: 500;
   }
 
-  .Issue-Content {
-    flex: 1;
-    min-width: 0;
+  .Issue-Meta {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
   }
 
   .Issue-Title {
-    font-size: 0.85rem;
-    color: rgba(255, 255, 255, 0.95);
-    margin: 0 0 0.5rem 0;
-    line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    line-height: 1.2;
     font-weight: 500;
   }
 
-  .Issue-Meta {
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
+  .Issue-Number {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0.125rem 0.375rem;
+    border-radius: 6px;
+    font-size: 0.7rem;
+    transition: background-color 0.3s ease;
+  }
+
+  :global(.dark) .Issue-Number {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  :global:not(.dark) .Issue-Number {
+    background: rgba(0, 0, 0, 0.1)er;
     font-size: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
@@ -264,25 +297,14 @@ if (repoInfo) {
   }
 
   .Issue-Label.help-wanted {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
-    color: #60a5fa;
-    border: 1px solid rgba(59, 130, 246, 0.3);
-    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
-  }
-
-  .no-issues {
-    text-align: center;
-    padding: 2rem 1rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  .no-issues-icon {
-    font-size: 2rem;
-    margin-bottom: 0.75rem;
-    opacity: 0.7;
+    backgrovar(--text-secondary);
   }
 
   .no-issues-text {
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+    color: var(--text-primary)t {
     font-size: 0.9rem;
     font-weight: 500;
     margin-bottom: 0.25rem;
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 1e171292..6fdc343b 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,12 +1,14 @@
 ---
 // Navbar component for social links
+import DarkModeToggle from './DarkModeToggle.astro';
 ---
 
 <div class="topnav">
-  <a href="https://join.slack.com/t/firstcontributors/shared_invite/zt-1n4y7xnk0-DnLVTaN6U9xLU79H5Hi62w" target="_blank" rel="noopener noreferrer">
-    <img src="/slack.svg" class="logo" alt="slack logo" />
-    <span>Slack</span>
-  </a>
+  <div class="nav-links">
+    <a href="https://join.slack.com/t/firstcontributors/shared_invite/zt-1n4y7xnk0-DnLVTaN6U9xLU79H5Hi62w" target="_blank" rel="noopener noreferrer">
+      <img src="/slack.svg" class="logo" alt="slack logo" />
+      <span>Slack</span>
+    </a>
   <a href="https://www.youtube.com/channel/UCMXNFxCvyH5LhUwEcmY8qGQ" target="_blank" rel="noopener noreferrer">
     <img src="/youtube.svg" class="logo" alt="youtube logo" />
     <span>Youtube</span>    
@@ -19,25 +21,45 @@
     <img src="/github.svg" class="logo" alt="github logo" />
     <span>GitHub</span>
   </a>
+  </div>
+  <DarkModeToggle />
 </div>
 
 <style>
   .topnav {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 2rem;
     padding: 1rem;
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+  }
+
+  :global:not(.dark) .topnav {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.dark) .topnav {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .nav-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    flex: 1;
   }
 
   .topnav a {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    color: white;
+    color: var(--text-primary);
     text-decoration: none;
     padding: 0.5rem 1rem;
     border-radius: 8px;
@@ -45,6 +67,10 @@
   }
 
   .topnav a:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.dark) .topnav a:hover {
     background-color: rgba(255, 255, 255, 0.1);
   }
 
@@ -55,14 +81,18 @@
 
   @media (max-width: 768px) {
     .topnav {
-      gap: 1rem;
+      gap: 0.5rem;
       padding: 0.5rem;
     }
-    
+
+    .nav-links {
+      gap: 1rem;
+    }
+
     .topnav a {
       padding: 0.25rem 0.5rem;
     }
-    
+
     .topnav span {
       display: none;
     }
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index b765d70d..2d3f602b 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -60,6 +60,20 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
     min-height: 200px;
     margin-bottom: 1.5rem;
     position: relative;
+    color: var(--text-primary);
+  }
+
+  :global(.dark) .Card-Container {
+    background: rgba(31, 41, 55, 0.6);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  :global(.dark) .Card-Container:hover {
+    background: rgba(31, 41, 55, 0.8);
+  }
+
+  :global:not(.dark) .Card-Container {
+    color: #000;
   }
 
   .Card-Container::before {
@@ -101,6 +115,15 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
     padding: 1.5rem 1.5rem 1rem;
     text-align: center;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    transition: border-color 0.3s ease;
+  }
+
+  :global(.dark) .Card-Header {
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+
+  :global:not(.dark) .Card-Header {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
   }
 
   .Project-Logo {
@@ -116,7 +139,7 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
   .Card-Title {
     font-size: 1.2rem;
     font-weight: 600;
-    color: white;
+    color: var(--text-primary);
     margin: 0;
   }
 
@@ -140,7 +163,7 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
     padding: 0.25rem 0.5rem;
     border-radius: 12px;
     font-size: 0.8rem;
-    margin: 0;
+    margin:var(--text-secondary
     border: 1px solid rgba(102, 126, 234, 0.3);
   }
 
diff --git a/src/components/ProjectList.astro b/src/components/ProjectList.astro
index 8a8806b8..e70f1ab8 100644
--- a/src/components/ProjectList.astro
+++ b/src/components/ProjectList.astro
@@ -139,16 +139,32 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))]
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.1);
-    color: white;
+    color: var(--text-primary);
     font-size: 1rem;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
   }
 
+  :global(.dark) #search {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: white;
+  }
+
+  :global:not(.dark) #search {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.1);
+    color: black;
+  }
+
   #search::placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
 
+  :global:not(.dark) #search::placeholder {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
   #search:focus {
     outline: none;
     border-color: #667eea;
@@ -161,16 +177,22 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))]
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.1);
-    color: white;
+    color: var(--text-primary);
     font-size: 1rem;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
   }
 
-  #tag-selector:focus {
-    outline: none;
-    border-color: #667eea;
-    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+  :global(.dark) #tag-selector {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: white;
+  }
+
+  :global:not(.dark) #tag-selector {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.1);
+    color: black;
   }
 
   #tag-selector option {
@@ -178,6 +200,11 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))]
     color: white;
   }
 
+  :global:not(.dark) #tag-selector option {
+    background: white;
+    color: black;
+  }
+
   .containerLayout {
     columns: 3;
     column-gap: 1.5rem;
diff --git a/src/components/SocialShare.astro b/src/components/SocialShare.astro
index 48147cd0..8409b5a6 100644
--- a/src/components/SocialShare.astro
+++ b/src/components/SocialShare.astro
@@ -52,9 +52,10 @@
 
   #social-share h2 {
     font-size: 2rem;
-    color: white;
+    color: var(--text-primary);
     margin-bottom: 2rem;
     font-weight: 600;
+    transition: color 0.3s ease;
   }
 
   #social-shares-container {
@@ -74,11 +75,23 @@
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     text-decoration: none;
-    color: white;
+    color: var(--text-primary);
     transition: all 0.3s ease;
     min-width: 200px;
   }
 
+  :global(.dark) .social-card {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: white;
+  }
+
+  :global:not(.dark) .social-card {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.1);
+    color: black;
+  }
+
   .social-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e5913ea1..c36aacbd 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -23,7 +23,7 @@ const {
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		
+
 		<!-- Favicon -->
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -36,20 +36,20 @@ const {
 		<meta name="msapplication-TileColor" content="#667eea" />
 		<meta name="msapplication-TileImage" content="/mstile-150x150.png" />
 		<meta name="theme-color" content="#667eea" />
-		
+
 		<!-- Web App Manifest -->
 		<link rel="manifest" href="/manifest.json" />
-		
+
 		<meta name="generator" content={Astro.generator} />
 		<meta name="description" content={description} />
 		<meta name="keywords" content={keywords} />
 		<meta name="author" content="First Contributions" />
 		<meta name="robots" content="index, follow" />
 		<title>{title}</title>
-		
+
 		<!-- Canonical URL -->
 		<link rel="canonical" href={url} />
-		
+
 		<!-- Open Graph / Facebook -->
 		<meta property="og:type" content={type} />
 		<meta property="og:url" content={url} />
@@ -59,7 +59,7 @@ const {
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="630" />
 		<meta property="og:site_name" content="First Contributions" />
-		
+
 		<!-- Twitter -->
 		<meta property="twitter:card" content="summary_large_image" />
 		<meta property="twitter:url" content={url} />
@@ -68,7 +68,7 @@ const {
 		<meta property="twitter:image" content={image} />
 		<meta property="twitter:creator" content="@firstcontrib" />
 		<meta property="twitter:site" content="@firstcontrib" />
-		
+
 		<!-- Structured Data / Schema.org -->
 		<script type="application/ld+json">
 		{
@@ -105,6 +105,17 @@ const {
 			}
 		}
 		</script>
+		<script is:inline>
+			// Initialize dark mode before page renders to prevent flash
+			(function() {
+				const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+				const isDarkMode = localStorage.getItem('darkMode') === 'true' ||
+									(localStorage.getItem('darkMode') === null && prefersDark.matches);
+				if (isDarkMode) {
+					document.documentElement.classList.add('dark');
+				}
+			})();
+		</script>
 	</head>
 	<body>
 		<slot />
@@ -112,6 +123,22 @@ const {
 </html>
 
 <style>
+	:root {
+		--bg-primary: #ffffff;
+		--bg-secondary: #f3f4f6;
+		--text-primary: #000000;
+		--text-secondary: #4b5563;
+		--border-color: #e5e7eb;
+	}
+
+	html.dark {
+		--bg-primary: #0a0a0a;
+		--bg-secondary: #1f2937;
+		--text-primary: #ffffff;
+		--text-secondary: #d1d5db;
+		--border-color: #374151;
+	}
+
 	html,
 	body {
 		margin: 0;
@@ -120,10 +147,11 @@ const {
 		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
-		background-color: #0a0a0a;
-		color: white;
+		background-color: var(--bg-primary);
+		color: var(--text-primary);
+		transition: background-color 0.3s ease, color 0.3s ease;
 	}
-	
+
 	* {
 		box-sizing: border-box;
 	}