From 83d55df73fd1c6e369c33bb2991e4ba0e28d53f3 Mon Sep 17 00:00:00 2001
From: James Magahern <james@magahern.com>
Date: Fri, 13 Feb 2026 23:20:57 -0800
Subject: [PATCH] web: dark style

---
 web/src/App.tsx   | 18 +++++++++---------
 web/src/index.css | 29 +++++++++++++++--------------
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 0878ade..43592ab 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -330,7 +330,7 @@ export default function App() {
 
   if (isCheckingSession) {
     return (
-      <div className="flex h-full items-center justify-center bg-muted/70">
+      <div className="flex h-full items-center justify-center">
         <p className="text-sm text-muted-foreground">Checking session...</p>
       </div>
     );
@@ -338,10 +338,10 @@ export default function App() {
 
   if (!isAuthenticated) {
     return (
-      <div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#f8fafc_0%,#eef2f7_45%,#e2e8f0_100%)] p-4">
-        <div className="w-full max-w-md rounded-2xl border bg-background p-6 shadow-xl">
+      <div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#171f33_0%,#111827_45%,#0b1020_100%)] p-4">
+        <div className="w-full max-w-md rounded-2xl border bg-[#0f172a] p-6 shadow-xl shadow-black/40">
           <div className="mb-5 flex items-start gap-3">
-            <div className="rounded-lg bg-slate-900 p-2 text-slate-50">
+            <div className="rounded-lg bg-slate-200 p-2 text-slate-900">
               <ShieldCheck className="h-4 w-4" />
             </div>
             <div>
@@ -388,8 +388,8 @@ export default function App() {
 
   return (
     <div className="h-full p-3 md:p-5">
-      <div className="mx-auto flex h-full w-full max-w-[1560px] overflow-hidden rounded-2xl border bg-background shadow-xl">
-        <aside className="flex w-80 shrink-0 flex-col border-r bg-slate-50">
+      <div className="mx-auto flex h-full w-full max-w-[1560px] overflow-hidden rounded-2xl border bg-background shadow-xl shadow-black/40">
+        <aside className="flex w-80 shrink-0 flex-col border-r bg-[#111827]">
           <div className="p-3">
             <Button className="w-full justify-start gap-2" onClick={handleCreateChat}>
               <Plus className="h-4 w-4" />
@@ -412,13 +412,13 @@ export default function App() {
                   key={chat.id}
                   className={cn(
                     "mb-1 w-full rounded-lg px-3 py-2 text-left transition",
-                    active ? "bg-slate-900 text-slate-50" : "hover:bg-slate-200"
+                    active ? "bg-slate-700 text-slate-50" : "text-slate-200 hover:bg-slate-800"
                   )}
                   onClick={() => setSelectedChatId(chat.id)}
                   type="button"
                 >
                   <p className="truncate text-sm font-medium">{getChatTitle(chat)}</p>
-                  <p className={cn("mt-1 text-xs", active ? "text-slate-300" : "text-slate-500")}>{formatDate(chat.updatedAt)}</p>
+                  <p className={cn("mt-1 text-xs", active ? "text-slate-200" : "text-slate-400")}>{formatDate(chat.updatedAt)}</p>
                 </button>
               );
             })}
@@ -478,7 +478,7 @@ export default function App() {
                     <div
                       className={cn(
                         "max-w-[85%] whitespace-pre-wrap rounded-2xl px-4 py-3 text-sm leading-6",
-                        isUser ? "bg-slate-900 text-slate-50" : "bg-slate-100 text-slate-900"
+                        isUser ? "bg-slate-200 text-slate-900" : "bg-slate-800 text-slate-100"
                       )}
                     >
                       {isPendingAssistant ? "Thinking..." : message.content}
diff --git a/web/src/index.css b/web/src/index.css
index d6695b5..51def7b 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -3,19 +3,19 @@
 @tailwind utilities;
 
 :root {
-  --background: 0 0% 100%;
-  --foreground: 222 47% 11%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215 16% 47%;
-  --border: 214 32% 91%;
-  --input: 214 32% 91%;
-  --ring: 221 83% 53%;
-  --primary: 222 84% 5%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222 47% 11%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222 47% 11%;
+  --background: 224 20% 10%;
+  --foreground: 210 40% 96%;
+  --muted: 223 18% 16%;
+  --muted-foreground: 217 15% 65%;
+  --border: 223 16% 22%;
+  --input: 223 16% 22%;
+  --ring: 215 85% 63%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 224 24% 11%;
+  --secondary: 223 18% 18%;
+  --secondary-foreground: 210 40% 98%;
+  --accent: 223 18% 20%;
+  --accent-foreground: 210 40% 98%;
   --radius: 0.65rem;
 }
 
@@ -30,6 +30,7 @@ body,
 }
 
 body {
-  @apply bg-muted/70 text-foreground antialiased;
+  @apply bg-background text-foreground antialiased;
+  background-image: radial-gradient(circle at top, hsl(222 30% 18%) 0%, hsl(224 21% 11%) 45%, hsl(224 20% 9%) 100%);
   font-family: "Soehne", "Avenir Next", "Segoe UI", sans-serif;
 }