feat: implement Vercel-style black/white monochrome theme with dark mode default and theme toggle

networkandcode · networkandcode · commit 43a374448482 · 2026-08-08T00:33:47.000+05:30
diff --git a/src/data/cv.json b/src/data/cv.json
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -40,6 +40,12 @@ const navItems = [
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
     <title>{title}</title>
     <meta name="description" content={description} />
+    <script is:inline>
+      const savedTheme = localStorage.getItem('theme');
+      const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const initialTheme = savedTheme || (systemDark ? 'dark' : 'dark'); // Default to dark
+      document.documentElement.setAttribute('data-theme', initialTheme);
+    </script>
   </head>
   <body>
     <header class="site-header">
@@ -54,12 +60,29 @@ const navItems = [
             );
           })}
         </nav>
+
+        <button id="theme-toggle-btn" class="theme-toggle-btn" aria-label="Toggle light and dark theme">
+          <span class="sun-icon">☀️</span>
+          <span class="moon-icon">🌙</span>
+        </button>
       </div>
     </header>
 
     <main class="site-main">
       <slot />
     </main>
+
+    <script>
+      const toggleBtn = document.getElementById('theme-toggle-btn');
+      if (toggleBtn) {
+        toggleBtn.addEventListener('click', () => {
+          const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
+          const nextTheme = currentTheme === 'dark' ? 'light' : 'dark';
+          document.documentElement.setAttribute('data-theme', nextTheme);
+          localStorage.setItem('theme', nextTheme);
+        });
+      }
+    </script>
   </body>
 </html>
 
@@ -68,24 +91,25 @@ const navItems = [
     position: sticky;
     top: 0;
     z-index: 50;
-    background: rgba(15, 23, 42, 0.85);
+    background: var(--bg-glass);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-bottom: 1px solid var(--border-glass);
     padding: 0.75rem 0;
+    transition: background 0.25s ease;
   }
 
   .header-content {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
   }
 
   .nav-links {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.35rem;
     flex-wrap: wrap;
-    justify-content: center;
+    align-items: center;
   }
 
   .nav-links a {
@@ -100,16 +124,63 @@ const navItems = [
 
   .nav-links a:hover {
     color: var(--text-main);
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  [data-theme="light"] .nav-links a:hover {
+    background: rgba(0, 0, 0, 0.05);
   }
 
   .nav-links a.active {
-    color: var(--accent-blue);
-    background: rgba(56, 189, 248, 0.12);
-    border-color: rgba(56, 189, 248, 0.3);
+    color: var(--text-main);
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--border-glass);
     font-weight: 600;
-    box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
+  }
+
+  [data-theme="light"] .nav-links a.active {
+    background: rgba(0, 0, 0, 0.06);
+    border-color: rgba(0, 0, 0, 0.12);
+  }
+
+  .theme-toggle-btn {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-glass);
+    border-radius: 8px;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  [data-theme="light"] .theme-toggle-btn {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  .theme-toggle-btn:hover {
+    border-color: var(--border-hover);
+    transform: scale(1.05);
+  }
+
+  .sun-icon {
+    display: none;
+    font-size: 0.95rem;
+  }
+
+  .moon-icon {
+    display: block;
+    font-size: 0.95rem;
+  }
+
+  [data-theme="light"] .sun-icon {
+    display: block;
+  }
+
+  [data-theme="light"] .moon-icon {
+    display: none;
   }
 
   .site-main {
@@ -118,15 +189,14 @@ const navItems = [
 
   @media (max-width: 768px) {
     .header-content {
-      flex-direction: column;
-      gap: 1rem;
+      gap: 0.75rem;
     }
     .nav-links {
-      gap: 0.35rem;
+      gap: 0.25rem;
     }
     .nav-links a {
-      font-size: 0.85rem;
-      padding: 0.35rem 0.65rem;
+      font-size: 0.82rem;
+      padding: 0.3rem 0.6rem;
     }
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -240,26 +240,30 @@ const totalProjects = featuredProjects.length;
   }
 
   .btn-primary {
-    background: linear-gradient(135deg, #0284c7, #4f46e5);
-    color: #ffffff;
-    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
+    background: var(--text-main);
+    color: var(--bg-primary);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   }
 
   .btn-primary:hover {
-    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5);
-    transform: translateY(-2px);
-    color: #ffffff;
+    opacity: 0.9;
+    transform: translateY(-1px);
+    color: var(--bg-primary);
   }
 
   .btn-secondary {
-    background: rgba(255, 255, 255, 0.05);
+    background: transparent;
     border: 1px solid var(--border-glass);
     color: var(--text-main);
   }
 
   .btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--accent-blue);
+    border-color: var(--border-hover);
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  [data-theme="light"] .btn-secondary:hover {
+    background: rgba(0, 0, 0, 0.04);
   }
 
   .btn-sm {
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,23 +1,52 @@
 :root {
-  /* Slate & Deep Indigo Professional Dark Theme */
-  --bg-primary: #0f172a;       /* Deep Slate Blue */
-  --bg-surface: #1e293b;       /* Elevated Surface Slate */
-  --bg-glass: rgba(30, 41, 59, 0.75);
-  --border-glass: rgba(255, 255, 255, 0.08);
+  /* Default Dark Vercel Theme */
+  --bg-primary: #000000;
+  --bg-surface: #0a0a0a;
+  --bg-card: rgba(18, 18, 18, 0.7);
+  --bg-glass: rgba(10, 10, 10, 0.8);
+  --border-glass: rgba(255, 255, 255, 0.12);
+  --border-hover: rgba(255, 255, 255, 0.3);
   
-  --text-main: #f8fafc;        /* High-contrast Slate Light Text */
-  --text-muted: #94a3b8;       /* Soft Muted Subtitles */
+  --text-main: #ededed;
+  --text-muted: #a1a1a1;
+  --text-subtle: #666666;
   
-  /* Refined Enterprise Accent Palette */
-  --accent-blue: #38bdf8;      /* Sky Blue Accent */
-  --accent-indigo: #818cf8;    /* Professional Indigo */
-  --accent-teal: #2dd4bf;      /* Clean Teal Accent */
-  
-  --glow-blue: rgba(56, 189, 248, 0.18);
-  --glow-indigo: rgba(129, 140, 248, 0.15);
+  --accent-blue: #ffffff;
+  --accent-indigo: #ededed;
+  --accent-orange: #ffffff;
+  --accent-amber: #a1a1a1;
   
+  --glow-blue: rgba(255, 255, 255, 0.1);
+  --glow-indigo: rgba(255, 255, 255, 0.08);
+
   --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  color-scheme: dark;
+}
+
+[data-theme="light"] {
+  /* Minimalist Light Vercel Theme */
+  --bg-primary: #ffffff;
+  --bg-surface: #fafafa;
+  --bg-card: rgba(255, 255, 255, 0.9);
+  --bg-glass: rgba(255, 255, 255, 0.85);
+  --border-glass: rgba(0, 0, 0, 0.08);
+  --border-hover: rgba(0, 0, 0, 0.25);
+  
+  --text-main: #171717;
+  --text-muted: #666666;
+  --text-subtle: #999999;
+  
+  --accent-blue: #000000;
+  --accent-indigo: #171717;
+  --accent-orange: #000000;
+  --accent-amber: #666666;
+  
+  --glow-blue: rgba(0, 0, 0, 0.05);
+  --glow-indigo: rgba(0, 0, 0, 0.03);
+
+  color-scheme: light;
 }
 
 * {
@@ -32,43 +61,43 @@ html {
   color: var(--text-main);
   scroll-behavior: smooth;
   line-height: 1.6;
+  transition: background-color 0.25s ease, color 0.25s ease;
 }
 
 body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background-color: var(--bg-primary);
   background-image: 
-    radial-gradient(circle at 15% 15%, var(--glow-blue) 0%, transparent 45%),
-    radial-gradient(circle at 85% 85%, var(--glow-indigo) 0%, transparent 45%);
+    radial-gradient(circle at 50% 0%, var(--glow-blue) 0%, transparent 60%);
   background-attachment: fixed;
 }
 
 a {
-  color: var(--accent-blue);
+  color: var(--text-main);
   text-decoration: none;
-  transition: color 0.2s ease, text-shadow 0.2s ease;
+  transition: color 0.2s ease, opacity 0.2s ease;
 }
 
 a:hover {
-  color: #7dd3fc;
-  text-shadow: 0 0 12px var(--glow-blue);
+  opacity: 0.8;
 }
 
 .glass-card {
-  background: var(--bg-glass);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  background: var(--bg-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--border-glass);
-  border-radius: 14px;
+  border-radius: 12px;
   padding: 1.75rem;
-  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
 }
 
 .glass-card:hover {
-  transform: translateY(-3px);
-  border-color: rgba(56, 189, 248, 0.35);
-  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.8), 0 0 20px var(--glow-blue);
+  transform: translateY(-2px);
+  border-color: var(--border-hover);
+  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.3);
 }
 
 .tag-badge {
@@ -77,9 +106,13 @@ a:hover {
   border-radius: 9999px;
   font-size: 0.8rem;
   font-weight: 500;
-  background: rgba(56, 189, 248, 0.1);
-  color: var(--accent-blue);
-  border: 1px solid rgba(56, 189, 248, 0.25);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-main);
+  border: 1px solid var(--border-glass);
+}
+
+[data-theme="light"] .tag-badge {
+  background: rgba(0, 0, 0, 0.05);
 }
 
 .container {
