feat(theme): add charcoal & chalk dark mode

- Introduced a new class-based .dark theme in global.css
- Replaced hardcoded ink canvas colors with CSS variables
- Replaced mix-blend-mode: multiply with color-dodge/screen for dark theme
- Added MutationObserver to InkCanvas.astro to redraw squiggles on theme flip
- Removed all border-radius styles universally for a sharp editorial look
- Added a FOUC-preventing ThemeToggle.astro component

Author: abhyudit

src/components/InkCanvas.astro

@@ -34,6 +34,12 @@
     mix-blend-mode: multiply;
     filter: url(#rough-ink);
     opacity: 0.85;
+    transition: mix-blend-mode 0.3s var(--ease), opacity 0.3s var(--ease);
+  }
+
+  html.dark #ink-canvas {
+    mix-blend-mode: screen;
+    opacity: 0.8;
   }
 </style>
 
@@ -44,6 +50,15 @@
   let width: number, height: number;
   let dpr = Math.min(window.devicePixelRatio || 1, 2);
 
+  function hexToRgba(hex: string, alpha: number) {
+    let c = hex.trim().replace('#', '');
+    if (c.length === 3) c = c.split('').map(x => x + x).join('');
+    const r = parseInt(c.slice(0, 2), 16) || 0;
+    const g = parseInt(c.slice(2, 4), 16) || 0;
+    const b = parseInt(c.slice(4, 6), 16) || 0;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
   function resize() {
     const rect = canvas.parentElement!.getBoundingClientRect();
     width = rect.width;
@@ -80,10 +95,16 @@
         });
       }
 
+      const isDark = document.documentElement.classList.contains('dark');
+      const rootStyles = getComputedStyle(document.documentElement);
+      const inkHex = rootStyles.getPropertyValue('--ink').trim() || (isDark ? '#e8e4dc' : '#1c1917');
+      const inkFaintHex = rootStyles.getPropertyValue('--ink-faint').trim() || (isDark ? '#7a746d' : '#a8a29e');
+      const accentHex = rootStyles.getPropertyValue('--accent').trim() || (isDark ? '#e06c53' : '#9e3b2d');
+
       const colors = [
-        'rgba(28, 25, 23, 0.18)', 'rgba(28, 25, 23, 0.14)', 'rgba(28, 25, 23, 0.12)',
-        'rgba(87, 83, 78, 0.13)', 'rgba(158, 59, 45, 0.10)', 'rgba(158, 59, 45, 0.08)',
-        'rgba(120, 113, 108, 0.11)', 'rgba(28, 25, 23, 0.20)'
+        hexToRgba(inkHex, 0.18), hexToRgba(inkHex, 0.14), hexToRgba(inkHex, 0.12),
+        hexToRgba(inkFaintHex, 0.13), hexToRgba(accentHex, 0.10), hexToRgba(accentHex, 0.08),
+        hexToRgba(inkHex, 0.11), hexToRgba(inkHex, 0.20)
       ];
       this.color = colors[Math.floor(Math.random() * colors.length)];
       this.baseWidth = 1 + Math.random() * 4;
@@ -172,10 +193,14 @@
   let dots: InkDot[] = [];
 
   function drawDots() {
+    const isDark = document.documentElement.classList.contains('dark');
+    const rootStyles = getComputedStyle(document.documentElement);
+    const inkHex = rootStyles.getPropertyValue('--ink').trim() || (isDark ? '#e8e4dc' : '#1c1917');
+
     for (const d of dots) {
       ctx.beginPath();
       ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2);
-      ctx.fillStyle = `rgba(28, 25, 23, ${d.opacity})`;
+      ctx.fillStyle = hexToRgba(inkHex, d.opacity);
       ctx.fill();
     }
   }
@@ -221,4 +246,14 @@
   init();
 
   window.addEventListener('resize', () => { init(); });
+
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      if (m.attributeName === 'class') {
+        init();
+        break;
+      }
+    }
+  });
+  observer.observe(document.documentElement, { attributes: true });
 </script>

src/components/ThemeToggle.astro

@@ -0,0 +1,70 @@
+---
+---
+
+<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
+  <span class="theme-toggle__bracket">[</span>
+  <span class="theme-toggle__text">dark</span>
+  <span class="theme-toggle__bracket">]</span>
+</button>
+
+<style>
+  .theme-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    color: var(--ink-subtle);
+    padding: 0;
+    margin-left: var(--space-md);
+    transition: color 0.2s var(--ease);
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.2em;
+  }
+  
+  .theme-toggle:hover {
+    color: var(--ink);
+  }
+  
+  .theme-toggle__bracket {
+    color: var(--border-dark);
+  }
+  
+  .theme-toggle:hover .theme-toggle__bracket {
+    color: var(--ink-faint);
+  }
+</style>
+
+<script>
+  const toggle = document.getElementById('theme-toggle');
+  const text = toggle?.querySelector('.theme-toggle__text');
+
+  function updateText() {
+    if (text) {
+      text.textContent = document.documentElement.classList.contains('dark') ? 'light' : 'dark';
+    }
+  }
+
+  // Set initial text on load
+  updateText();
+
+  toggle?.addEventListener('click', () => {
+    document.documentElement.classList.toggle('dark');
+    const isDark = document.documentElement.classList.contains('dark');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    updateText();
+  });
+
+  // Listen for OS theme changes if user hasn't explicitly set a preference
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    if (!localStorage.getItem('theme')) {
+      if (e.matches) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+      updateText();
+    }
+  });
+</script>

src/layouts/Base.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from '../components/Icon.astro';
+import ThemeToggle from '../components/ThemeToggle.astro';
 
 interface Props {
   title: string;
@@ -18,19 +18,34 @@ const currentPath = Astro.url.pathname;
     <meta name="description" content={description} />
     <title>{title}</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <script is:inline>
+      const theme = (() => {
+        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+          return localStorage.getItem('theme');
+        }
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          return 'dark';
+        }
+        return 'light';
+      })();
+      if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+      }
+    </script>
   </head>
   <body>
     <header class="site-header">
       <div class="container container--wide">
         <div class="site-header__inner">
           <a href="/" class="site-header__name">Abhyudit Singh</a>
-          <nav>
+          <nav style="display: flex; align-items: baseline;">
             <ul class="site-nav">
               <li><a href="/projects" class:list={[{ active: currentPath.startsWith('/projects') }]}>projects</a></li>
               <li><a href="/research" class:list={[{ active: currentPath.startsWith('/research') }]}>research</a></li>
               <li><a href="/blog" class:list={[{ active: currentPath.startsWith('/blog') }]}>blog</a></li>
               <li><a href="/misc" class:list={[{ active: currentPath.startsWith('/misc') }]}>misc</a></li>
             </ul>
+            <ThemeToggle />
           </nav>
         </div>
       </div>

src/styles/global.css

@@ -67,6 +67,27 @@
   --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
+html.dark {
+  /* Paper tones -> Charcoal tones */
+  --bg:          #161615;
+  --bg-warm:     #1c1a19;
+  --bg-card:     #211f1e;
+  --border:      #33302e;
+  --border-dark: #4a4542;
+
+  /* Ink tones -> Chalk tones */
+  --ink:         #e8e4dc;
+  --ink-light:   #b8b2a7;
+  --ink-faint:   #7a746d;
+  --ink-subtle:  #968f86;
+
+  /* Accent */
+  --accent:       #e06c53;
+  --accent-hover: #fca5a5;
+  --accent-glow:  rgba(224, 108, 83, 0.15);
+  --accent-soft:  #b35a47;
+}
+
 /* ── Base ──────────────────────────────── */
 
 html {
@@ -172,7 +193,7 @@ code {
   font-size: 0.88em;
   background: var(--bg-warm);
   padding: 0.15em 0.4em;
-  border-radius: 3px;
+  border-radius: 0;
   color: var(--ink);
   border: 1px solid var(--border);
 }
@@ -381,7 +402,7 @@ hr {
   padding: var(--space-md) var(--space-lg);
   background: var(--accent-glow);
   border: 1px solid rgba(158, 59, 45, 0.12);
-  border-radius: 6px;
+  border-radius: 0;
   margin: var(--space-xl) 0;
   transition: border-color 0.3s var(--ease);
 }
@@ -438,7 +459,7 @@ hr {
   width: 48px;
   height: 2px;
   background: var(--accent);
-  border-radius: 1px;
+  border-radius: 0;
 }
 
 /* ═══════════════════════════════════════════
@@ -510,7 +531,7 @@ hr {
   color: var(--ink-subtle);
   background: var(--bg-warm);
   padding: 0.2em 0.6em;
-  border-radius: 3px;
+  border-radius: 0;
   white-space: nowrap;
   border: 1px solid var(--border);
   transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
@@ -735,7 +756,7 @@ hr {
   width: 32px;
   height: 2px;
   background: var(--accent);
-  border-radius: 1px;
+  border-radius: 0;
 }
 
 .misc-item {