From 636ffd9a91b775220f97224e1d3bbb039a70c73b Mon Sep 17 00:00:00 2001
From: Soham Rayate <rayatesoham@gmail.com>
Date: Wed, 20 May 2026 10:45:06 +0530
Subject: [PATCH 1/2] refactor: improve dark mode architecture and styling

---
 package-lock.json    |   6 ++
 static/script.js     |  35 +++++++++
 static/style.css     | 183 ++++++++++++++++++++++++++++++++++++++++++-
 templates/index.html |   6 +-
 4 files changed, 225 insertions(+), 5 deletions(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..c440360c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "SR-DevPath",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/static/script.js b/static/script.js
index 9d96ab93..4c7ea5f5 100644
--- a/static/script.js
+++ b/static/script.js
@@ -955,3 +955,38 @@ if (scrollTopBtn) {
     window.addEventListener('scroll', handleScroll);
     scrollTopBtn.addEventListener('click', scrollToTop);
 }
+}
+
+
+// ============================================================
+// Dark Mode Toggle
+// ============================================================
+
+(function initDarkMode() {
+  const toggle = document.getElementById("theme-toggle");
+
+  if (!toggle) return;
+
+  // Load saved theme
+  const savedTheme = localStorage.getItem("theme");
+
+  if (savedTheme === "dark") {
+    document.documentElement.setAttribute("data-theme", "dark");
+    toggle.textContent = "☀️";
+  }
+
+  toggle.addEventListener("click", function () {
+    const isDark =
+      document.documentElement.getAttribute("data-theme") === "dark";
+
+    if (isDark) {
+      document.documentElement.removeAttribute("data-theme");
+      localStorage.setItem("theme", "light");
+      toggle.textContent = "🌙";
+    } else {
+      document.documentElement.setAttribute("data-theme", "dark");
+      localStorage.setItem("theme", "dark");
+      toggle.textContent = "☀️";
+    }
+  });
+})();
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 13cd1c94..045cfb0a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -75,6 +75,27 @@
   --t: 0.2s ease;
 }
 
+[data-theme="dark"] {
+  --white: #0b1120;
+  --gray-50: #111827;
+  --gray-100: #1f2937;
+  --gray-200: #374151;
+  --gray-300: #4b5563;
+  --gray-400: #9ca3af;
+  --gray-500: #d1d5db;
+  --gray-600: #e5e7eb;
+  --gray-700: #f3f4f6;
+  --gray-900: #ffffff;
+
+  --text-heading: #ffffff;
+  --text-body: #d1d5db;
+  --border: #374151;
+
+  background: #0b1120;
+  color: #f9fafb;
+}.feature-card--pink
+
+
 /* ---- Reset ------------------------------------------------- */
 *,
 *::before,
@@ -135,6 +156,13 @@ ol {
   margin-bottom: 16px;
 }
 
+/* Dark mode section eyebrow */
+[data-theme="dark"] .section-eyebrow {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #374151;
+}
+
 .section-title {
   font-family: var(--font-display);
   font-size: clamp(1.75rem, 3.5vw, 2.5rem);
@@ -291,6 +319,26 @@ ol {
   text-decoration: none;
 }
 
+/* Dark mode toggle button */
+.theme-toggle {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  border: 1px solid rgba(255,255,255,0.15);
+  background: rgba(255,255,255,0.08);
+  color: white;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.25s ease;
+}
+
+.theme-toggle:hover {
+  background: rgba(255,255,255,0.18);
+  transform: translateY(-2px);
+}
+
+
+
 /* Mobile hamburger */
 .nav-mobile-toggle {
   display: none;
@@ -491,6 +539,16 @@ ol {
   text-decoration: none;
 }
 
+[data-theme="dark"] .btn-hero-primary {
+  background: #fbbf24;
+  color: #111827;
+  box-shadow: none;
+}
+
+[data-theme="dark"] .btn-hero-primary:hover {
+  background: #f59e0b;
+}
+
 .btn-hero-ghost {
   display: inline-flex;
   align-items: center;
@@ -531,6 +589,12 @@ ol {
   box-shadow: var(--shadow-lg);
 }
 
+/* Dark mode hero visual cards */
+[data-theme="dark"] .hero-visual-card {
+  background: #111827;
+  border: 1px solid #374151;
+}
+
 .hvc-icon {
   width: 40px;
   height: 40px;
@@ -551,6 +615,11 @@ ol {
   color: var(--green-500);
 }
 
+[data-theme="dark"] .hvc-icon {
+  background: #1f2937;
+  border: 1px solid #374151;
+}
+
 .hvc-text {
   display: flex;
   flex-direction: column;
@@ -564,11 +633,19 @@ ol {
   color: var(--gray-900);
 }
 
+[data-theme="dark"] .hvc-title {
+  color: #f9fafb;
+}
+
 .hvc-sub {
   font-size: 0.77rem;
   color: var(--gray-500);
 }
 
+[data-theme="dark"] .hvc-sub {
+  color: #d1d5db;
+}
+
 /* Code preview card */
 .hero-visual-main {
   background: #0d1117;
@@ -814,6 +891,17 @@ ol {
   padding: 18px 32px;
 }
 
+[data-theme="dark"] .skill-strip {
+  background:
+    radial-gradient(circle at top left,
+      rgba(79, 70, 229, 0.08),
+      transparent 35%),
+    radial-gradient(circle at bottom right,
+      rgba(99, 102, 241, 0.06),
+      transparent 30%),
+    #020617;
+}
+
 .skill-strip-inner {
   max-width: 1140px;
   margin: 0 auto;
@@ -829,6 +917,13 @@ ol {
   -webkit-backdrop-filter: blur(10px);
 }
 
+/* Dark mode skill strip */
+[data-theme="dark"] .skill-strip-inner {
+  background: #111827;
+  border: 1px solid #374151;
+  box-shadow: none;
+}
+
 .skill-strip-label {
   flex-shrink: 0;
   font-size: 0.74rem;
@@ -866,6 +961,15 @@ ol {
     border-color 180ms ease,
     box-shadow 180ms ease;
 }
+
+/* Dark mode tech stack pills */
+[data-theme="dark"] .ss-item {
+  background: rgba(31, 41, 55, 0.9);
+  color: #f9fafb;
+  border: 1px solid rgba(75, 85, 99, 0.4);
+}
+
+
 .ss-item:hover {
   transform: translateY(-1px);
   color: var(--indigo-700);
@@ -883,6 +987,10 @@ ol {
   flex-shrink: 0;
 }
 
+[data-theme="dark"] .ss-sep {
+  color: #818cf8;
+}
+
 @keyframes skill-strip-marquee {
   from { transform: translateX(0); }
   to { transform: translateX(-50%); }
@@ -902,12 +1010,19 @@ ol {
   }
 
   .skill-strip-marquee {
-    overflow: visible;
-    mask-image: none;
-    -webkit-mask-image: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  overflow: hidden;
   }
 }
 
+.skill-strip-marquee > * {
+  flex-shrink: 0;
+}
+
 @media (max-width: 768px) {
   .skill-strip {
     padding: 14px 16px;
@@ -1051,6 +1166,14 @@ ol {
   background: var(--purple-100);
 }
 
+/* Dark mode feature cards */
+[data-theme="dark"] .feature-card.feature-card--pink,
+[data-theme="dark"] .feature-card.feature-card--yellow,
+[data-theme="dark"] .feature-card.feature-card--purple {
+  background: #111827;
+  border: 1px solid #374151;
+}
+
 .feature-card-icon {
   width: 52px;
   height: 52px;
@@ -1061,6 +1184,17 @@ ol {
   justify-content: center;
   margin-bottom: 22px;
   box-shadow: var(--shadow-xs);
+  
+}
+
+/* Dark mode feature icons */
+[data-theme="dark"] .feature-card-icon {
+  background: #1f2937;
+  border: 1px solid #374151;
+}
+
+[data-theme="dark"] .feature-card-icon svg {
+  stroke: #f9fafb;
 }
 
 .feature-card--pink .feature-card-icon {
@@ -1102,6 +1236,19 @@ ol {
   padding: 7px 16px;
   border-radius: var(--r-full);
   transition: background var(--t), border-color var(--t);
+  
+}
+
+/* Dark mode feature buttons */
+[data-theme="dark"] .feature-card-link {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #374151;
+}
+
+[data-theme="dark"] .feature-card-link:hover {
+  background: #374151;
+  color: white;
 }
 
 .feature-card-link:hover {
@@ -1307,6 +1454,14 @@ label {
   transition: background var(--t), border-color var(--t), color var(--t);
 }
 
+[data-theme="dark"] .skill-pill,
+[data-theme="dark"] .skill-chip,
+[data-theme="dark"] .tech-pill {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #374151;
+}
+
 .skill-chip:hover,
 .skill-chip.active {
   background: var(--indigo-700);
@@ -1410,6 +1565,17 @@ select:focus {
   box-shadow: none;
 }
 
+/* Dark mode clear button */
+[data-theme="dark"] .btn-clear {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #374151;
+}
+
+[data-theme="dark"] .btn-clear:hover {
+  background: #374151;
+}
+
 /* ---- Results Section -------------------------------------- */
 .results-section {
   padding: 80px 0 108px;
@@ -2588,6 +2754,17 @@ select:focus {
     border-color: rgba(79, 110, 247, 0.2);
 }
 
+/* Dark mode GitHub import button */
+[data-theme="dark"] #btn-show-github {
+  background: #1f2937 !important;
+  color: #f9fafb !important;
+  border: 1px solid #374151 !important;
+}
+
+[data-theme="dark"] #btn-show-github:hover {
+  background: #374151 !important;
+}
+
 #github-modal-overlay.active {
     display: flex !important; /* Overrides the 'none' display */
     backdrop-filter: blur(4px);
diff --git a/templates/index.html b/templates/index.html
index 18537b94..57ccbca5 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,7 +28,10 @@
         <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>
+      <button id="theme-toggle" class="theme-toggle">
+        🌙
+      </button>
+    </div>
       <!-- Mobile hamburger toggle -->
       <button class="nav-mobile-toggle" id="nav-mobile-toggle" aria-label="Toggle navigation">
         <span></span><span></span><span></span>
@@ -205,7 +208,6 @@ <h1 class="hero-heading">
   <div class="skill-strip-inner">
     <span class="skill-strip-label">Supports skills including:</span>
     <div class="skill-strip-marquee" aria-label="Supported skills">
-      <div class="skill-strip-track">
         <div class="skill-strip-items">
           <span class="ss-item">Python</span>
           <span class="ss-sep"></span>

From 38564500eb980c2599b8e9399432ab47e8d46020 Mon Sep 17 00:00:00 2001
From: Soham Rayate <rayatesoham@gmail.com>
Date: Tue, 26 May 2026 10:42:13 +0530
Subject: [PATCH 2/2] Improve accessibility and reduced motion support

---
 package-lock.json    |  2 +-
 static/style.css     | 14 ++++++++++++++
 templates/index.html |  2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c440360c..6eb5cc4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "SR-DevPath",
+  "name": "DevPath",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {}
diff --git a/static/style.css b/static/style.css
index 045cfb0a..410cee09 100644
--- a/static/style.css
+++ b/static/style.css
@@ -3022,4 +3022,18 @@ select:focus {
   flex: 1;
   white-space: pre;
   color: #e6edf3;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 57ccbca5..13ce68de 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,7 +28,7 @@
         <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>
-      <button id="theme-toggle" class="theme-toggle">
+      <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode" aria-pressed="false">
         🌙
       </button>
     </div>