feat: add dark/light mode toggle with localStorage persistence

static/script.js

@@ -713,7 +713,30 @@ if (isDetailPage) {
     try { document.execCommand("copy"); showCopySuccess(); } catch (e) { /* silent fail */ }
     document.body.removeChild(ta);
   }
-} // end isDetailPage
+
+  // =====================================================
+// Dark / Light Mode Toggle
+(function initThemeToggle() {
+  var themeToggle = document.getElementById('theme-toggle');
+  var themeIcon   = document.getElementById('theme-icon');
+
+  if (!themeToggle) return;
+
+  // Apply saved preference on load
+  if (localStorage.getItem('theme') === 'dark') {
+    document.body.classList.add('dark-mode');
+    themeIcon.textContent = '☀️';
+  }
+themeToggle.addEventListener('click', function () {
+    document.body.classList.toggle('dark-mode');
+    var isDark = document.body.classList.contains('dark-mode');
+    themeIcon.textContent = isDark ? '☀️' : '🌙';
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  });
+})();
+
+
+}  // end isDetailPage
 
 
 /* ---- Scroll-to-top button ---- */
@@ -743,4 +766,4 @@ function scrollToTop() {
 if (scrollTopBtn) {
     window.addEventListener('scroll', handleScroll);
     scrollTopBtn.addEventListener('click', scrollToTop);
-}
+}

static/style.css

@@ -6,6 +6,39 @@
    ============================================================= */
 
 /* ---- Variables -------------------------------------------- */
+/* ── Theme Variables ── */
+
+
+body.dark-mode {
+  --bg-color: #0f0f1a;
+  --text-color: #ffffff;
+  --card-bg: #1e1e2e;
+     --text-heading: #f9fafb;
+  --text-body:#d1d5db;
+  --border: #2e2e42;
+--gray-50:#1a1a2e;
+  --gray-100:#22223a;
+  --white: #1e1e2e;
+}
+
+
+
+/* Toggle Button */
+.theme-toggle {
+  background: none;
+  border: 2px solid var(--text-color);
+  border-radius: 50%;
+  width: 38px;
+  height: 38px;
+  cursor: pointer;
+  font-size: 18px;
+  margin-left: 10px;
+  transition: 0.3s;
+}
+
+.theme-toggle:hover {
+  transform: scale(1.1);
+}
 :root {
   /* Core palette */
   --indigo-900: #0f1560;
@@ -50,7 +83,10 @@
   --text-body:    var(--gray-600);
   --text-light:   var(--gray-400);
   --border:       var(--gray-200);
-
+/*  Theme defaults (light mode)  */
+  --bg-color:   #ffffff;
+  --text-color: #111827;
+  --card-bg:    #ffffff;
   /* Shadows */
   --shadow-xs: 0 1px 2px rgba(15, 21, 96, 0.05);
   --shadow-sm: 0 2px 8px rgba(15, 21, 96, 0.08);
@@ -84,6 +120,7 @@ body {
   background: var(--white);
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
+  transition: background-color 0.3s, color 0.3s;
 }
 img { display: block; max-width: 100%; }
 a { color: var(--indigo-500); text-decoration: none; }
@@ -1968,4 +2005,4 @@ select:focus {
 
 #scroll-top-btn.visible {
     display: flex;
-}
+}

templates/index.html

@@ -22,11 +22,16 @@
     <div class="nav-inner">
       <a href="/" class="nav-logo">Dev<span class="nav-logo-accent">Path</span></a>
       <div class="nav-links">
+
         <a href="#how-it-works" class="nav-link">How It Works</a>
         <a href="#features" class="nav-link">Features</a>
         <a href="#find-project" class="nav-link">Find Project</a>
         <a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer" class="nav-btn-outline">GitHub</a>
       </div>
+      <!-- Dark/Light Mode Toggle -->
+       <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
+       <span id="theme-icon">🌙</span>
+      </button>
       <!-- Mobile hamburger toggle -->
       <button class="nav-mobile-toggle" id="nav-mobile-toggle" aria-label="Toggle navigation">
         <span></span><span></span><span></span>