color scheme changes

web/src/App.tsx

@@ -609,7 +609,7 @@ export default function App() {
   return (
     <div className="h-full">
       <div className="flex h-full w-full overflow-hidden bg-background">
-        <aside className="flex w-80 shrink-0 flex-col border-r bg-[#111827]">
+        <aside className="flex w-80 shrink-0 flex-col border-r bg-[hsl(272_34%_14%)]">
           <div className="grid grid-cols-2 gap-2 p-3">
             <Button className="justify-start gap-2" onClick={handleCreateChat}>
               <Plus className="h-4 w-4" />
@@ -636,7 +636,7 @@ export default function App() {
                   key={`${item.kind}-${item.id}`}
                   className={cn(
                     "mb-1 w-full rounded-lg px-3 py-2 text-left transition",
-                    active ? "bg-slate-700 text-slate-50" : "text-slate-200 hover:bg-slate-800"
+                    active ? "bg-violet-500/30 text-violet-100" : "text-violet-200/85 hover:bg-violet-500/15"
                   )}
                   onClick={() => {
                     setContextMenu(null);
@@ -650,7 +650,7 @@ export default function App() {
                     {item.kind === "chat" ? <MessageSquare className="h-3.5 w-3.5" /> : <Search className="h-3.5 w-3.5" />}
                     <p className="truncate text-sm font-medium">{item.title}</p>
                   </div>
-                  <p className={cn("mt-1 text-xs", active ? "text-slate-200" : "text-slate-400")}>{formatDate(item.updatedAt)}</p>
+                  <p className={cn("mt-1 text-xs", active ? "text-violet-100/90" : "text-violet-300/60")}>{formatDate(item.updatedAt)}</p>
                 </button>
               );
             })}

web/src/components/auth/auth-screen.tsx

@@ -12,10 +12,10 @@ type Props = {
 
 export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, authError, onSignIn }: Props) {
   return (
-    <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="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#45215f_0%,#2a183d_45%,#191227_100%)] p-4">
-      <div className="w-full max-w-md rounded-2xl border bg-[#0f172a] p-6 shadow-xl shadow-black/40">
+      <div className="w-full max-w-md rounded-2xl border bg-[hsl(276_32%_14%)] p-6 shadow-xl shadow-violet-950/45">
         <div className="mb-5 flex items-start gap-3">
-          <div className="rounded-lg bg-slate-200 p-2 text-slate-900">
+          <div className="rounded-lg bg-violet-200 p-2 text-violet-900">
             <ShieldCheck className="h-4 w-4" />
           </div>
           <div>

web/src/components/chat/chat-messages-panel.tsx

@@ -26,7 +26,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
               <div
                 className={cn(
                   "max-w-[85%] whitespace-pre-wrap rounded-2xl px-4 py-3 text-sm leading-6",
-                  isUser ? "bg-slate-200 text-slate-900" : "bg-slate-800 text-slate-100"
+                  isUser ? "bg-fuchsia-200 text-fuchsia-950" : "bg-violet-900/80 text-fuchsia-50"
                 )}
               >
                 {isPendingAssistant ? "Thinking..." : message.content}

web/src/components/search/search-results-panel.tsx

@@ -92,8 +92,8 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
       ) : null}
 
       {(isRunning || !!search?.answerText || !!search?.answerError) && (
-        <section className="mb-6 rounded-xl border border-slate-600/60 bg-[#121a2e] p-4">
+        <section className="mb-6 rounded-xl border border-violet-400/35 bg-[hsl(276_31%_15%)] p-4">
-          <p className="text-xs font-semibold uppercase tracking-wide text-sky-300/90">Answer</p>
+          <p className="text-xs font-semibold uppercase tracking-wide text-violet-300/90">Answer</p>
           {(isAnswerLoading || hasAnswerText) ? (
             <div className="mt-2">
               <div className="relative">
@@ -111,19 +111,19 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
                       markdown={search?.answerText ?? ""}
                       mode="citationTokens"
                       resolveCitationIndex={resolveCitationIndex}
-                      className="text-sm leading-6 text-slate-100"
+                      className="text-sm leading-6 text-violet-50"
                     />
                   )}
                 </div>
                 {!isAnswerExpanded && (isExpandable || isAnswerLoading) ? (
-                  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-7 bg-gradient-to-t from-[#121a2e] to-transparent" />
+                  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-7 bg-gradient-to-t from-[hsl(276_31%_15%)] to-transparent" />
                 ) : null}
               </div>
               <div className="mt-2 h-5">
                 {isExpandable ? (
                   <button
                     type="button"
-                    className="inline-flex items-center gap-1 text-xs font-medium text-sky-200 hover:text-sky-100"
+                    className="inline-flex items-center gap-1 text-xs font-medium text-violet-200 hover:text-violet-100"
                     onClick={() => setIsAnswerExpanded((current) => !current)}
                   >
                     <span className={cn("inline-block text-[11px] transition-transform", isAnswerExpanded && "rotate-180")}>▾</span>
@@ -143,9 +143,9 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
                     href={citation.href}
                     target="_blank"
                     rel="noreferrer"
-                    className="rounded-md border border-slate-500/60 px-2 py-1 text-xs text-sky-200 hover:bg-slate-700/40"
+                    className="rounded-md border border-violet-400/40 px-2 py-1 text-xs text-violet-200 hover:bg-violet-500/20"
                   >
-                    <span className="mr-1 rounded bg-slate-700/80 px-1 py-0.5 text-[10px] text-slate-100">{citation.index}</span>
+                    <span className="mr-1 rounded bg-violet-900/70 px-1 py-0.5 text-[10px] text-violet-100">{citation.index}</span>
                     {citation.label}
                   </a>
                 );
@@ -174,15 +174,15 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
       <div className="space-y-6">
         {search?.results.map((result) => {
           return (
-            <article key={result.id} className="rounded-lg border border-border bg-[#0d1322] px-4 py-4 shadow-sm">
+            <article key={result.id} className="rounded-lg border border-border bg-[hsl(276_30%_13%)] px-4 py-4 shadow-sm">
-              <p className="text-xs text-emerald-300/85">{formatHost(result.url)}</p>
+              <p className="text-xs text-violet-300/85">{formatHost(result.url)}</p>
-              <a href={result.url} target="_blank" rel="noreferrer" className="mt-1 block text-lg font-medium text-sky-300 hover:underline">
+              <a href={result.url} target="_blank" rel="noreferrer" className="mt-1 block text-lg font-medium text-violet-300 hover:underline">
                 {result.title || result.url}
               </a>
               {(result.publishedDate || result.author) && (
                 <p className="mt-1 text-xs text-muted-foreground">{[result.publishedDate, result.author].filter(Boolean).join(" • ")}</p>
               )}
-              {result.url ? <p className="mt-2 text-sm leading-6 text-slate-200">{result.url}</p> : null}
+              {result.url ? <p className="mt-2 text-sm leading-6 text-violet-100/90">{result.url}</p> : null}
             </article>
           );
         })}

web/src/index.css

@@ -3,19 +3,19 @@
 @tailwind utilities;
 
 :root {
-  --background: 224 20% 10%;
+  --background: 282 33% 10%;
-  --foreground: 210 40% 96%;
+  --foreground: 300 35% 95%;
-  --muted: 223 18% 16%;
+  --muted: 287 24% 16%;
-  --muted-foreground: 217 15% 65%;
+  --muted-foreground: 297 16% 72%;
-  --border: 223 16% 22%;
+  --border: 287 24% 24%;
-  --input: 223 16% 22%;
+  --input: 287 24% 24%;
-  --ring: 215 85% 63%;
+  --ring: 264 76% 70%;
-  --primary: 210 40% 98%;
+  --primary: 266 72% 67%;
-  --primary-foreground: 224 24% 11%;
+  --primary-foreground: 296 45% 12%;
-  --secondary: 223 18% 18%;
+  --secondary: 277 24% 19%;
-  --secondary-foreground: 210 40% 98%;
+  --secondary-foreground: 302 42% 94%;
-  --accent: 223 18% 20%;
+  --accent: 279 24% 22%;
-  --accent-foreground: 210 40% 98%;
+  --accent-foreground: 305 45% 94%;
   --radius: 0.65rem;
 }
 
@@ -31,7 +31,7 @@ body,
 
 body {
   @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%);
+  background-image: radial-gradient(circle at top, hsl(274 42% 20%) 0%, hsl(271 34% 14%) 42%, hsl(266 32% 9%) 100%);
   font-family: "Soehne", "Avenir Next", "Segoe UI", sans-serif;
 }
 
@@ -54,7 +54,7 @@ body {
 }
 
 .md-content code {
-  background: hsl(223 18% 22%);
+  background: hsl(288 22% 23%);
   border-radius: 0.25rem;
   padding: 0.05rem 0.3rem;
   font-size: 0.86em;
@@ -63,12 +63,12 @@ body {
 .md-content pre {
   overflow-x: auto;
   border-radius: 0.5rem;
-  background: hsl(223 18% 12%);
+  background: hsl(287 28% 13%);
   padding: 0.6rem 0.75rem;
 }
 
 .md-content a {
-  color: hsl(198 95% 72%);
+  color: hsl(269 88% 76%);
   text-decoration: underline;
 }
 
@@ -76,9 +76,9 @@ body {
   display: inline-flex;
   align-items: center;
   border-radius: 9999px;
-  border: 1px solid hsl(217 24% 54%);
+  border: 1px solid hsl(274 40% 55%);
-  background: hsl(223 23% 21%);
+  background: hsl(277 33% 21%);
-  color: hsl(210 40% 96%);
+  color: hsl(304 42% 96%);
   font-size: 0.72rem;
   line-height: 1;
   padding: 0.12rem 0.38rem;