feat: dark mode in dashboard

- @custom-variant dark for class-based toggling (.dark ancestor)
- .dark overrides --color-background, --color-grid, --color-muted,
  --color-faint so semantic tokens flip automatically
- Moon/Sun toggle in sidebar header; preference persisted to localStorage
- Explicit dark: variants on all hardcoded bg-white, bg-gray-*, text-black
  elements across sidebar, thread list, chat viewer, action bar, bubbles
- Status badges (amber/red/green) get dark:bg-*/border-* variants
- MarkdownContent adds dark:prose-invert for readable md in dark mode

Author: vchan-in

src/components/MarkdownContent.tsx

@@ -53,7 +53,7 @@ interface MarkdownContentProps {
 
 export default function MarkdownContent({ children }: MarkdownContentProps) {
   return (
-    <div className="prose prose-sm max-w-none overflow-hidden [overflow-wrap:break-word]">
+    <div className="prose prose-sm max-w-none overflow-hidden [overflow-wrap:break-word] dark:prose-invert">
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
         {children}
       </ReactMarkdown>

src/options/App.tsx

@@ -8,7 +8,7 @@
  * ────────────────────────────────────────────── */
 
 import React, { useEffect, useRef, useState } from "react";
-import { Copy, Check, Share2, Trash2, Search, Inbox, Download, Upload, AlertCircle } from "lucide-react";
+import { Copy, Check, Share2, Trash2, Search, Inbox, Download, Upload, AlertCircle, Moon, Sun } from "lucide-react";
 import { HacklmLogo } from "../components/HacklmIcon";
 import MarkdownContent from "../components/MarkdownContent";
 import { stripMarkdown } from "../utils/stripMarkdown";
@@ -67,6 +67,15 @@ export default function App() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [copyMode, setCopyMode] = useState<"md" | "txt">("md");
   const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [dark, setDark] = useState<boolean>(() => {
+    return localStorage.getItem("theme") === "dark";
+  });
+
+  const toggleDark = () => {
+    const next = !dark;
+    setDark(next);
+    localStorage.setItem("theme", next ? "dark" : "light");
+  };
 
   const copyMessage = async (id: string, content: string) => {
     const text = copyMode === "md" ? content : stripMarkdown(content);
@@ -181,19 +190,27 @@ export default function App() {
   };
 
   return (
-    <div className="flex h-screen bg-background">
+    <div className={`flex h-screen bg-background${dark ? " dark" : ""}`}>
       {/* ── Sidebar ──────────────────────────────────────── */}
-      <aside className="w-64 shrink-0 bg-white border-r border-grid p-4 flex flex-col gap-4">
-        <div className="pb-4 border-b border-grid">
+      <aside className="w-64 shrink-0 bg-white dark:bg-[#1a1a1a] border-r border-grid p-4 flex flex-col gap-4">
+        <div className="pb-4 border-b border-grid flex items-center justify-between">
           <HacklmLogo size={28} />
+          <button
+            onClick={toggleDark}
+            title={dark ? "Switch to light mode" : "Switch to dark mode"}
+            className="p-1.5 rounded-sm text-faint hover:text-muted hover:bg-gray-100
+                       dark:hover:bg-[#262626] transition"
+          >
+            {dark ? <Sun size={14} strokeWidth={2} /> : <Moon size={14} strokeWidth={2} />}
+          </button>
         </div>
 
         <div className="flex flex-col gap-1 text-sm font-mono mt-2">
           <button
             onClick={() => setFilter("all")}
             className={`text-left px-3 py-2 rounded-sm transition ${filter === "all"
-              ? "bg-gray-100 text-black border border-grid"
-              : "text-muted hover:bg-gray-50 border border-transparent"
+              ? "bg-gray-100 dark:bg-[#262626] text-black dark:text-[#e8e8e8] border border-grid"
+              : "text-muted hover:bg-gray-50 dark:hover:bg-[#1f1f1f] border border-transparent"
               }`}
           >
             All ({index.length})
@@ -205,8 +222,8 @@ export default function App() {
                 key={p}
                 onClick={() => setFilter(p)}
                 className={`text-left px-3 py-2 rounded-sm transition flex items-center gap-2 ${filter === p
-                  ? "bg-gray-100 text-black border border-grid"
-                  : "text-muted hover:bg-gray-50 border border-transparent"
+                  ? "bg-gray-100 dark:bg-[#262626] text-black dark:text-[#e8e8e8] border border-grid"
+                  : "text-muted hover:bg-gray-50 dark:hover:bg-[#1f1f1f] border border-transparent"
                   }`}
               >
                 <span
@@ -226,7 +243,7 @@ export default function App() {
           {(() => {
             if (!lastExported) {
               return (
-                <div className="flex items-start gap-2 text-xs font-mono text-amber-700 bg-amber-50 border border-amber-200 rounded-sm px-3 py-2">
+                <div className="flex items-start gap-2 text-xs font-mono text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 rounded-sm px-3 py-2">
                   <AlertCircle size={12} className="mt-0.5 shrink-0" />
                   <span>No backup yet. Export your data before uninstalling.</span>
                 </div>
@@ -237,7 +254,7 @@ export default function App() {
             );
             if (daysSince > 7) {
               return (
-                <div className="flex items-start gap-2 text-xs font-mono text-amber-700 bg-amber-50 border border-amber-200 rounded-sm px-3 py-2">
+                <div className="flex items-start gap-2 text-xs font-mono text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 rounded-sm px-3 py-2">
                   <AlertCircle size={12} className="mt-0.5 shrink-0" />
                   <span>Last backup {daysSince}d ago. Consider exporting.</span>
                 </div>
@@ -277,8 +294,9 @@ export default function App() {
               fileInputRef.current?.click();
             }}
             disabled={importing}
-            className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-white border border-grid
-                       hover:bg-gray-50 text-black text-xs font-mono rounded-sm transition disabled:opacity-50"
+            className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-white dark:bg-[#1a1a1a]
+                       border border-grid hover:bg-gray-50 dark:hover:bg-[#1f1f1f]
+                       text-black dark:text-[#e8e8e8] text-xs font-mono rounded-sm transition disabled:opacity-50"
           >
             <Upload size={12} strokeWidth={2} />
             {importing ? "Importing…" : "Import File"}
@@ -288,8 +306,8 @@ export default function App() {
             <div
               className={`text-[11px] font-mono px-2 py-1.5 rounded-sm border ${
                 importStatus.error
-                  ? "text-red-700 bg-red-50 border-red-200"
-                  : "text-green-700 bg-green-50 border-green-200"
+                  ? "text-red-700 dark:text-red-400 bg-red-50 dark:bg-red-950/40 border-red-200 dark:border-red-800"
+                  : "text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-950/40 border-green-200 dark:border-green-800"
               }`}
             >
               {importStatus.error
@@ -304,7 +322,7 @@ export default function App() {
 
       {/* ── Thread list ──────────────────────────────────── */}
       <section className="w-80 shrink-0 border-r border-grid bg-background flex flex-col">
-        <div className="p-3 border-b border-grid bg-white">
+        <div className="p-3 border-b border-grid bg-white dark:bg-[#1a1a1a]">
           <div className="relative">
             <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-faint pointer-events-none" />
             <input
@@ -335,8 +353,8 @@ export default function App() {
               onClick={() => openThread(t.id)}
               className={`w-full text-left px-4 py-3 border-b border-grid transition
                 ${active?.id === t.id
-                  ? "bg-gray-100"
-                  : "bg-white hover:bg-gray-50"
+                  ? "bg-gray-100 dark:bg-[#262626]"
+                  : "bg-white dark:bg-[#1a1a1a] hover:bg-gray-50 dark:hover:bg-[#1f1f1f]"
                 }`}
             >
               <div className="font-medium text-sm truncate">{t.title}</div>
@@ -353,7 +371,7 @@ export default function App() {
       </section>
 
       {/* ── Chat viewer ──────────────────────────────────── */}
-      <main className="flex-1 flex flex-col min-w-0 bg-white">
+      <main className="flex-1 flex flex-col min-w-0 bg-white dark:bg-[#111111]">
         {!active ? (
           <div className="flex-1 flex items-center justify-center text-muted">
             <div className="text-center">
@@ -386,8 +404,8 @@ export default function App() {
                 </button>
                 <button
                   onClick={() => deleteThread(active.id)}
-                  className="px-4 py-2 bg-white border border-grid hover:bg-gray-50 text-black text-xs font-mono
-                             rounded-sm transition tracking-tight flex items-center gap-1.5"
+                  className="px-4 py-2 bg-white dark:bg-[#1a1a1a] border border-grid hover:bg-gray-50 dark:hover:bg-[#1f1f1f]
+                             text-black dark:text-[#e8e8e8] text-xs font-mono rounded-sm transition tracking-tight flex items-center gap-1.5"
                 >
                   <Trash2 size={12} strokeWidth={2} /> Delete
                 </button>
@@ -402,7 +420,7 @@ export default function App() {
                 className={`px-2 py-0.5 text-[10px] font-mono rounded-sm border transition
                   ${copyMode === "md"
                     ? "border-accent text-accent bg-accent/5"
-                    : "border-grid text-faint hover:border-muted hover:text-muted"}`}
+                    : "border-grid text-faint hover:border-muted hover:text-muted dark:hover:text-[#888]"}`}
               >
                 MD
               </button>
@@ -411,7 +429,7 @@ export default function App() {
                 className={`px-2 py-0.5 text-[10px] font-mono rounded-sm border transition
                   ${copyMode === "txt"
                     ? "border-accent text-accent bg-accent/5"
-                    : "border-grid text-faint hover:border-muted hover:text-muted"}`}
+                    : "border-grid text-faint hover:border-muted hover:text-muted dark:hover:text-[#888]"}`}
               >
                 TXT
               </button>
@@ -433,7 +451,8 @@ export default function App() {
                       onClick={() => copyMessage(m.id, m.content)}
                       title={`Copy as ${copyMode === "md" ? "markdown" : "plain text"}`}
                       className="flex items-center gap-1 px-2 py-1 text-[10px] font-mono rounded-sm
-                                 bg-white border border-grid text-muted hover:text-black hover:border-muted transition"
+                                 bg-white dark:bg-[#1a1a1a] border border-grid text-muted
+                                 hover:text-black dark:hover:text-[#e8e8e8] hover:border-muted transition"
                     >
                       {copiedId === m.id
                         ? <><Check size={10} strokeWidth={2.5} /> Copied</>  
@@ -443,7 +462,8 @@ export default function App() {
                       onClick={() => shareMessage(m.content)}
                       title="Share message"
                       className="flex items-center gap-1 px-2 py-1 text-[10px] font-mono rounded-sm
-                                 bg-white border border-grid text-muted hover:text-black hover:border-muted transition"
+                                 bg-white dark:bg-[#1a1a1a] border border-grid text-muted
+                                 hover:text-black dark:hover:text-[#e8e8e8] hover:border-muted transition"
                     >
                       <Share2 size={10} strokeWidth={2} /> Share
                     </button>
@@ -452,8 +472,8 @@ export default function App() {
                   <div
                     className={`px-5 py-4 rounded-sm text-sm leading-relaxed border border-grid overflow-hidden
                       ${m.role === "user"
-                        ? "bg-gray-50 text-black"
-                        : "bg-white text-black"}`}
+                        ? "bg-gray-50 dark:bg-[#1f1f1f] text-black dark:text-[#e8e8e8]"
+                        : "bg-white dark:bg-[#1a1a1a] text-black dark:text-[#e8e8e8]"}`}
                   >
                     <MarkdownContent>{m.content}</MarkdownContent>
                   </div>

src/styles/global.css

@@ -2,6 +2,9 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+/* Class-based dark mode: applies when an ancestor has class="dark" */
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
   --color-background: #fbfbfb;
   --color-accent: #fb631b;
@@ -20,4 +23,13 @@
   body {
     @apply bg-background text-black antialiased font-sans;
   }
+
+  /* Dark token overrides — semantic tokens flip automatically */
+  .dark {
+    --color-background: #111111;
+    --color-grid: #2a2a2a;
+    --color-muted: #888888;
+    --color-faint: #555555;
+    color-scheme: dark;
+  }
 }