feat: add light/dark theme toggle to landing page (#54)

Author: namansharmapvt04-dot

apps/web/src/app.css

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
+/* light theme — default */
 :root {
   /* Primary */
   --primary: #6366f1;
@@ -8,23 +9,39 @@
   --accent: #8b5cf6;
 
   /* Background */
+  --bg-primary: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --bg-card: #ffffff;
+  --bg-elevated: #e2e8f0;
+
+  /* Text */
+  --text-primary: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+
+  /* Border */
+  --border: #e2e8f0;
+
+  /* Spacing */
+  --radius: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+
+  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* dark theme */
+html.dark {
   --bg-primary: #0f0f1a;
   --bg-secondary: #1a1a2e;
   --bg-card: #16213e;
   --bg-elevated: #1e293b;
 
-  /* Text */
   --text-primary: #f8fafc;
   --text-secondary: #94a3b8;
   --text-muted: #64748b;
 
-  /* Border */
   --border: #334155;
-
-  /* Spacing */
-  --radius: 12px;
-  --radius-lg: 16px;
-  --radius-xl: 24px;
 }
 
 * {
@@ -37,16 +54,17 @@ body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background-color: var(--bg-primary);
   color: var(--text-primary);
+  transition: var(--theme-transition);
   -webkit-font-smoothing: antialiased;
   min-height: 100vh;
 }
 
 a {
-  color: var(--primary-light);
+  color: var(--primary);
   text-decoration: none;
   transition: color 0.2s;
 }
 
 a:hover {
-  color: var(--primary);
+  color: var(--primary-dark);
 }

apps/web/src/routes/+page.svelte

@@ -1,3 +1,25 @@
+<script>
+  import { onMount } from 'svelte';
+
+  let theme = 'light';
+
+  onMount(() => {
+    const saved = localStorage.getItem('devcard-theme');
+    if (saved) {
+      theme = saved;
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      theme = 'dark';
+    }
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+  });
+
+  function toggleTheme() {
+    theme = theme === 'light' ? 'dark' : 'light';
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    localStorage.setItem('devcard-theme', theme);
+  }
+</script>
+
 <svelte:head>
   <title>DevCard — One Tap. Every Profile. Every Platform.</title>
   <meta
@@ -8,6 +30,14 @@
 
 <main class="landing">
   <section class="hero">
+    <button
+      id="theme-toggle"
+      class="theme-toggle"
+      on:click={toggleTheme}
+      aria-label="Toggle theme"
+    >
+      {theme === 'light' ? '🌙' : '☀️'}
+    </button>
     <div class="logo">⚡</div>
     <h1>DevCard</h1>
     <p class="tagline">One Tap. Every Profile. Every Platform.</p>
@@ -92,10 +122,46 @@
 </main>
 
 <style>
+  /* ── Theme toggle button ────────────────────────────────────────── */
+  .theme-toggle {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    width: 2.75rem;
+    height: 2.75rem;
+    font-size: 1.3rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background 0.3s ease,
+      border-color 0.3s ease,
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    line-height: 1;
+  }
+
+  .theme-toggle:hover {
+    transform: scale(1.12) rotate(15deg);
+    border-color: var(--primary);
+    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
+  }
+
+  .theme-toggle:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 3px;
+  }
+
   .landing {
     max-width: 960px;
     margin: 0 auto;
     padding: 2rem;
+    position: relative;
   }
 
   .hero {