feat: add dark mode (candlelit morgue theme)

Author: itxashancode

next.config.mjs

@@ -22,11 +22,11 @@ const nextConfig = {
             key: 'Content-Security-Policy',
             value: [
               "default-src 'self'",
-              "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com",
+              "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com https://plausible.io",
               "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
               "font-src 'self' https://fonts.gstatic.com",
-              "img-src 'self' data: blob: https://img.shields.io https://avatars.githubusercontent.com",
-              "connect-src 'self' https://vitals.vercel-insights.com https://va.vercel-scripts.com",
+              "img-src 'self' data: blob: https://img.shields.io https://avatars.githubusercontent.com https://plausible.io",
+              "connect-src 'self' https://vitals.vercel-insights.com https://va.vercel-scripts.com https://plausible.io",
               "frame-ancestors 'none'",
             ].join('; '),
           },

src/app/globals.css

@@ -9,25 +9,46 @@
   /* Backgrounds */
   --c-bg:       #FAF6EF;   /* page background */
   --c-surface:  #EDE8E1;   /* cards */
+  --c-surface-raised: #F5F0E8; /* cards lifted above surface */
 
   /* Text */
   --c-ink:      #160A06;   /* primary text */
   --c-ink-2:    #4a4440;   /* body text on cards */
-  --c-muted:    #9a9288;   /* metadata, labels */
+  --c-muted:    #8a8a8a;   /* metadata, labels */
   --c-faint:    #b0aca8;   /* very quiet text */
 
   /* Borders */
   --c-border:   #1a1a1a;   /* all solid borders — cards, inputs, buttons */
   --c-border-light: #cec6bb; /* dividers, ghost buttons */
 
   /* Accent */
-  --c-red:      #8B0000;   /* dead / error */
+  --c-red:      #8B1A1A;   /* dead / error */
   --c-green:    #2d7a3c;   /* alive */
   --c-amber:    #b45309;   /* struggling */
+  --c-stamp-red: #8B1A1A;  /* semantic alias for certificate stamp */
+}
 
-  /* Extended */
-  --c-surface-raised: #F5F0E8; /* cards lifted above surface */
-  --c-stamp-red: #8B0000;      /* semantic alias for certificate stamp */
+[data-theme="dark"] {
+  /* Backgrounds */
+  --c-bg:       #0F0C09;   /* page background */
+  --c-surface:  #1A1510;   /* cards */
+  --c-surface-raised: #241D16; /* cards lifted above surface */
+
+  /* Text */
+  --c-ink:      #EDE8E1;   /* primary text */
+  --c-ink-2:    #9a9288;   /* body text on cards */
+  --c-muted:    #6a6058;   /* metadata, labels */
+  --c-faint:    #4a4038;   /* very quiet text */
+
+  /* Borders */
+  --c-border:   #3a3028;   /* all solid borders — cards, inputs, buttons */
+  --c-border-light: #2a241e; /* dividers, ghost buttons */
+
+  /* Accent */
+  --c-red:      #C0392B;   /* dead / error */
+  --c-green:    #27ae60;   /* alive */
+  --c-amber:    #d35400;   /* struggling */
+  --c-stamp-red: #C0392B;
 }
 
 /* ── Unified record / institutional card system ───────────────────── */
@@ -106,7 +127,7 @@
 .page-shell-main {
   min-height: 100vh;
   min-height: 100dvh;
-  background: #FAF6EF;
+  background: var(--c-bg);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -164,7 +185,7 @@
   display: inline-block;
   width: 8px;
   height: 8px;
-  background: #8b0000;
+  background: var(--c-red);
   border-radius: 50%;
   animation: loading-bounce 1s ease-in-out infinite;
 }
@@ -180,14 +201,14 @@
   font-size: clamp(3.2rem, 9vw, 5rem);
   line-height: 0.95;
   margin: 6px 0 12px 0;
-  color: #160a06;
+  color: var(--c-ink);
 }
 
 .page-hero-sub {
   font-family: var(--font-courier), system-ui, sans-serif;
   font-size: clamp(13px, 3vw, 15px);
   font-weight: 400;
-  color: #5f5f5f;
+  color: var(--c-ink-2);
   line-height: 1.35;
   margin: 0 auto;
   max-width: 520px;
@@ -222,7 +243,7 @@
 .page-hero-micro {
   font-family: var(--font-courier), system-ui, sans-serif;
   font-size: 11px;
-  color: #8a8a8a;
+  color: var(--c-muted);
   line-height: 1.5;
   margin: 4px auto 0;
   letter-spacing: 0.03em;
@@ -347,7 +368,7 @@ button {
 }
 @media (hover: hover) and (pointer: fine) {
   .cert-btn-primary:hover {
-    background: #2a2a2a !important;
+    opacity: 0.9 !important;
   }
 }
 .cert-btn-primary:active {
@@ -360,7 +381,7 @@ button {
 }
 @media (hover: hover) and (pointer: fine) {
   .cert-btn-secondary:hover {
-    background: #EDE8E1 !important;
+    background: var(--c-surface-raised) !important;
   }
 }
 .cert-btn-secondary:active {
@@ -387,7 +408,7 @@ button {
 }
 .readme-badge-caption {
   font-size: 10px;
-  color: #b0a89e;
+  color: var(--c-muted);
   letter-spacing: 0.04em;
   margin: 10px 0 0;
 }
@@ -462,7 +483,7 @@ button {
 
 
 a.subpage-inline-mail {
-  color: #1a1a1a;
+  color: var(--c-ink);
   text-decoration: underline;
   text-underline-offset: 3px;
   word-break: break-all;
@@ -483,10 +504,11 @@ a.subpage-inline-mail {
   right: 0;
   bottom: 0;
   z-index: 40;
-  background: rgba(250, 246, 239, 0.92);
+  background: var(--c-bg);
+  opacity: 0.92;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
-  border-top: 1px solid #e2dcd1;
+  border-top: 1px solid var(--c-border-light);
 }
 
 .site-footer--compact {
@@ -504,25 +526,26 @@ a.subpage-inline-mail {
 }
 
 .input-button-wrapper:focus-within {
-  box-shadow: 0 0 0 3px rgba(26,26,26,0.12);
+  box-shadow: 0 0 0 3px var(--c-border-light);
+  opacity: 0.8;
 }
 
 .input-submit-button:hover {
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.22);
+  opacity: 0.9;
 }
 
 .input-submit-button:active {
   opacity: 0.9;
 }
 
 .input-submit-button--dark {
-  background: #1a1a1a !important;
-  color: #fff !important;
+  background: var(--c-ink) !important;
+  color: var(--c-bg) !important;
 }
 
 @media (hover: hover) and (pointer: fine) {
   .input-submit-button--dark:hover {
-    background: #2a2a2a !important;
+    opacity: 0.9 !important;
   }
 }
 
@@ -531,7 +554,7 @@ a.subpage-inline-mail {
 }
 
 .recent-card:focus-visible {
-  outline: 2px solid #1a1a1a;
+  outline: 2px solid var(--c-border);
   outline-offset: 4px;
 }
 
@@ -589,8 +612,8 @@ a.subpage-inline-mail {
     @apply antialiased;
     font-family: var(--font-courier), system-ui, sans-serif;
     font-size: 14px;
-    color: #160A06;
-    background-color: #FAF6EF;
+    color: var(--c-ink);
+    background-color: var(--c-bg);
     overflow-x: hidden;
   }
   html { overflow-x: hidden; }
@@ -600,11 +623,11 @@ a.subpage-inline-mail {
     cursor: default !important;
   }
   * { box-sizing: border-box; }
-  input::placeholder { color: #aaa; opacity: 1; }
+  input::placeholder { color: var(--c-faint); opacity: 0.7; }
   input:-webkit-autofill,
   input:-webkit-autofill:focus {
-    -webkit-text-fill-color: #160A06;
-    -webkit-box-shadow: 0 0 0 1000px #FAF6EF inset;
+    -webkit-text-fill-color: var(--c-ink);
+    -webkit-box-shadow: 0 0 0 1000px var(--c-bg) inset;
     transition: background-color 5000s ease-in-out 0s;
   }
 }
@@ -640,7 +663,7 @@ a.subpage-inline-mail {
     text-align: center;
     font-family: var(--font-courier), system-ui, sans-serif;
     font-size: 11px;
-    color: #7a7a7a;
+    color: var(--c-muted);
     letter-spacing: 0.02em;
   }
 
@@ -679,7 +702,7 @@ a.subpage-inline-mail {
   .input-submit-button {
     width: 100%;
     border-left: none !important;
-    border-top: 2px solid #1a1a1a !important;
+    border-top: 2px solid var(--c-border) !important;
     margin-top: 0 !important;
     justify-content: center !important;
     text-align: center !important;

src/app/layout.tsx

@@ -94,9 +94,14 @@ const jsonLd = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var t=localStorage.getItem('theme');if(!t&&window.matchMedia('(prefers-color-scheme:dark)').matches)t='dark';if(!t)t='light';document.documentElement.setAttribute('data-theme',t)}catch(e){}})();`,
+          }}
+        />
       </head>
       <body className={`${spaceGrotesk.variable} ${unifraktur.variable} ${lora.variable} antialiased`}>
         <ScannerBanner />

src/app/page.tsx

@@ -185,8 +185,8 @@ function HomePage() {
       {/* User scan error */}
       {userFetchError && !userLoading && (
         <div style={{ textAlign: 'center', padding: '40px 0' }}>
-          <p style={{ fontFamily: MONO, fontSize: '13px', color: '#8B0000', marginBottom: '20px' }}>{userFetchError}</p>
-          <button className="alive-interactive" onClick={resetUser} style={{ fontFamily: MONO, fontSize: '13px', fontWeight: 700, background: 'none', border: 'none', textDecoration: 'underline', textUnderlineOffset: '3px', color: '#160A06', cursor: 'pointer' }}>
+          <p style={{ fontFamily: MONO, fontSize: '13px', color: 'var(--c-red)', marginBottom: '20px' }}>{userFetchError}</p>
+          <button className="alive-interactive" onClick={resetUser} style={{ fontFamily: MONO, fontSize: '13px', fontWeight: 700, background: 'none', border: 'none', textDecoration: 'underline', textUnderlineOffset: '3px', color: 'var(--c-ink)', cursor: 'pointer' }}>
             ← examine another subject
           </button>
         </div>
@@ -206,8 +206,8 @@ function HomePage() {
                 letterSpacing: '0.06em',
                 transition: 'color 0.15s',
               }}
-              onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.color = '#1a1a1a' }}
-              onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.color = '#9a9288' }}
+              onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.color = 'var(--c-ink)' }}
+              onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.color = 'var(--c-muted)' }}
             >
               ← back
             </button>

src/components/CertificateCard.tsx

@@ -386,8 +386,8 @@ export default function CertificateCard({ cert, onReset }: Props) {
             letterSpacing: '0.06em',
             transition: 'color 0.15s',
           }}
-          onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.color = '#1a1a1a' }}
-          onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.color = '#9a9288' }}
+          onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.color = 'var(--c-ink)' }}
+          onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.color = 'var(--c-muted)' }}
         >
           ← {referrerUser ? `back to @${referrerUser}` : 'back'}
         </button>
@@ -412,8 +412,8 @@ export default function CertificateCard({ cert, onReset }: Props) {
             minHeight: '44px',
             transition: 'color 0.15s',
           }}
-          onMouseEnter={e => (e.currentTarget.style.color = '#1a1a1a')}
-          onMouseLeave={e => (e.currentTarget.style.color = '#5f5f5f')}
+          onMouseEnter={e => (e.currentTarget.style.color = 'var(--c-ink)')}
+          onMouseLeave={e => (e.currentTarget.style.color = 'var(--c-muted)')}
         >
           <GitHubIcon size={14} />
           view on github
@@ -480,8 +480,8 @@ export default function CertificateCard({ cert, onReset }: Props) {
               style={{
                 fontFamily: MONO, fontSize: '13px', fontWeight: 700, letterSpacing: '0.06em',
                 flex: 1, height: '44px',
-                background: '#1a1a1a', color: '#fff',
-                border: '2px solid #1a1a1a',
+                background: 'var(--c-ink)', color: 'var(--c-bg)',
+                border: '2px solid var(--c-ink)',
                 cursor: isGeneratingShare ? 'wait' : 'pointer',
                 display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
               }}
@@ -496,8 +496,8 @@ export default function CertificateCard({ cert, onReset }: Props) {
               style={{
                 fontFamily: MONO, fontSize: '13px', fontWeight: 700, letterSpacing: '0.06em',
                 flex: 1, height: '44px',
-                background: '#FAF6EF', color: '#1a1a1a',
-                border: '2px solid #1a1a1a',
+                background: 'var(--c-bg)', color: 'var(--c-ink)',
+                border: '2px solid var(--c-ink)',
                 cursor: isDownloading ? 'wait' : 'pointer',
                 display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
               }}
@@ -516,8 +516,8 @@ export default function CertificateCard({ cert, onReset }: Props) {
               className="cert-btn-primary"
               style={{
                 fontFamily: MONO, fontSize: '14px', fontWeight: 700, letterSpacing: '0.06em',
-                width: '100%', height: '44px', background: '#1a1a1a', color: '#fff',
-                border: '2px solid #1a1a1a', cursor: 'pointer',
+                width: '100%', height: '44px', background: 'var(--c-ink)', color: 'var(--c-bg)',
+                border: '2px solid var(--c-ink)', cursor: 'pointer',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
               }}
             >
@@ -529,8 +529,8 @@ export default function CertificateCard({ cert, onReset }: Props) {
               className="cert-btn-secondary"
               style={{
                 fontFamily: MONO, fontSize: '13px', fontWeight: 700, letterSpacing: '0.06em',
-                width: '100%', height: '44px', background: '#FAF6EF', color: '#1a1a1a',
-                border: '2px solid #1a1a1a', cursor: 'pointer',
+                width: '100%', height: '44px', background: 'var(--c-bg)', color: 'var(--c-ink)',
+                border: '2px solid var(--c-ink)', cursor: isDownloading ? 'wait' : 'pointer',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
               }}
             >
@@ -669,7 +669,7 @@ export default function CertificateCard({ cert, onReset }: Props) {
 
         {/* Export error */}
         {exportError && (
-          <p style={{ fontFamily: MONO, fontSize: '12px', color: '#8B1A1A', textAlign: 'center', margin: '0' }}>
+          <p style={{ fontFamily: MONO, fontSize: '12px', color: 'var(--c-red)', textAlign: 'center', margin: '0' }}>
             {exportError}
           </p>
         )}
@@ -694,8 +694,8 @@ export default function CertificateCard({ cert, onReset }: Props) {
               textDecorationColor: 'rgba(0,0,0,0.2)',
               transition: 'color 0.15s',
             }}
-            onMouseEnter={e => { e.currentTarget.style.color = '#1f1f1f' }}
-            onMouseLeave={e => { e.currentTarget.style.color = '#5f5f5f' }}
+            onMouseEnter={e => { e.currentTarget.style.color = 'var(--c-ink)' }}
+            onMouseLeave={e => { e.currentTarget.style.color = 'var(--c-muted)' }}
           >
             {referrerUser ? `back to @${referrerUser}'s graveyard →` : 'certify another repo →'}
           </button>

src/components/ClickSpark.tsx

@@ -7,7 +7,7 @@ interface Props {
   count?: number
 }
 
-export default function ClickSpark({ children, color = '#1a1a1a', count = 10 }: Props) {
+export default function ClickSpark({ children, color, count = 10 }: Props) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
   useEffect(() => {
@@ -31,6 +31,10 @@ export default function ClickSpark({ children, color = '#1a1a1a', count = 10 }:
 
     const x = e.clientX
     const y = e.clientY
+    
+    // Resolve color from CSS variable if not provided
+    const sparkColor = color || (typeof window !== 'undefined' ? getComputedStyle(document.documentElement).getPropertyValue('--c-ink').trim() : '#1a1a1a')
+
     const sparks = Array.from({ length: count }, (_, i) => ({
       angle: (i / count) * Math.PI * 2 + (Math.random() - 0.5) * 0.5,
       len: 14 + Math.random() * 14,
@@ -49,7 +53,7 @@ export default function ClickSpark({ children, color = '#1a1a1a', count = 10 }:
         ctx!.beginPath()
         ctx!.moveTo(x + Math.cos(s.angle) * r0, y + Math.sin(s.angle) * r0)
         ctx!.lineTo(x + Math.cos(s.angle) * r1, y + Math.sin(s.angle) * r1)
-        ctx!.strokeStyle = color
+        ctx!.strokeStyle = sparkColor
         ctx!.globalAlpha = 1 - p
         ctx!.lineWidth = 1.5
         ctx!.stroke()