From 1dd14b2bccc12593514b4de943d9a81bc7b941a6 Mon Sep 17 00:00:00 2001
From: Utkarsh Singh <utkaarshsingh52211@gmail.com>
Date: Sun, 17 May 2026 11:45:40 +0530
Subject: [PATCH 1/3] feat: add dark/light mode toggle with localStorage
 persistence

---
 static/script.js     | 20 ++++++++++++++++++++
 static/style.css     | 30 ++++++++++++++++++++++++++++++
 templates/index.html |  5 +++++
 3 files changed, 55 insertions(+)

diff --git a/static/script.js b/static/script.js
index 58b5d60b..0ce6a4a4 100644
--- a/static/script.js
+++ b/static/script.js
@@ -687,5 +687,25 @@ if (isDetailPage) {
     try { document.execCommand("copy"); showCopySuccess(); } catch (e) { /* silent fail */ }
     document.body.removeChild(ta);
   }
+  // =====================================================
+// Dark / Light Mode Toggle
+
+var themeToggle = document.getElementById('theme-toggle');
+var themeIcon = document.getElementById('theme-icon');
+
+if (themeToggle) {
+ 
+  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
diff --git a/static/style.css b/static/style.css
index 837c450d..207cfbd8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -6,6 +6,33 @@
    ============================================================= */
 
 /* ---- Variables -------------------------------------------- */
+/* ── Theme Variables ── */
+
+
+body.dark-mode {
+  --bg-color: #0f0f1a;
+  --text-color: #ffffff;
+  --card-bg: #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;
@@ -84,6 +111,9 @@ body {
   background: var(--white);
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
+  
+   background-color: var(--bg-color);
+  transition: background-color 0.3s, color 0.3s;
 }
 img { display: block; max-width: 100%; }
 a { color: var(--indigo-500); text-decoration: none; }
diff --git a/templates/index.html b/templates/index.html
index 0e8b0d20..377d5dde 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,11 +16,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" 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>

From be28784b0cd79b7705f1509d389c09abf7bb3e2a Mon Sep 17 00:00:00 2001
From: shubh22-u <utkaarshsingh52211@gmail.com>
Date: Mon, 18 May 2026 01:19:09 +0530
Subject: [PATCH 2/3] Update script.js

---
 static/script.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/static/script.js b/static/script.js
index 76e09249..e006c118 100644
--- a/static/script.js
+++ b/static/script.js
@@ -716,25 +716,27 @@ if (isDetailPage) {
 
   // =====================================================
 // Dark / Light Mode Toggle
+(function initThemeToggle() {
+  var themeToggle = document.getElementById('theme-toggle');
+  var themeIcon   = document.getElementById('theme-icon');
 
-var themeToggle = document.getElementById('theme-toggle');
-var themeIcon = document.getElementById('theme-icon');
+  if (!themeToggle) return;
 
-if (themeToggle) {
- 
+  // Apply saved preference on load
   if (localStorage.getItem('theme') === 'dark') {
     document.body.classList.add('dark-mode');
     themeIcon.textContent = '☀️';
   }
-
-  themeToggle.addEventListener('click', function () {
+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
+})();
+
+
+}  // end isDetailPage
 
 
 /* ---- Scroll-to-top button ---- */
@@ -764,4 +766,4 @@ function scrollToTop() {
 if (scrollTopBtn) {
     window.addEventListener('scroll', handleScroll);
     scrollTopBtn.addEventListener('click', scrollToTop);
-}
\ No newline at end of file
+}

From f610fd25ca0ce7759ecd8a13195d0b6e37acef64 Mon Sep 17 00:00:00 2001
From: shubh22-u <utkaarshsingh52211@gmail.com>
Date: Mon, 18 May 2026 01:26:27 +0530
Subject: [PATCH 3/3] Update style.css

---
 static/style.css | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/static/style.css b/static/style.css
index c1054e80..f34ed8ed 100644
--- a/static/style.css
+++ b/static/style.css
@@ -13,6 +13,12 @@ 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;
 }
 
 
@@ -77,7 +83,10 @@ body.dark-mode {
   --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);
@@ -111,8 +120,6 @@ body {
   background: var(--white);
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
-  
-   background-color: var(--bg-color);
   transition: background-color 0.3s, color 0.3s;
 }
 img { display: block; max-width: 100%; }
@@ -1998,4 +2005,4 @@ select:focus {
 
 #scroll-top-btn.visible {
     display: flex;
-}
\ No newline at end of file
+}