diff --git a/web/src/app.css b/web/src/app.css
index 99bbb5c..434cad1 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -30,6 +30,156 @@
   initial-value: #e5e7eb;
 }
 
+@property --color-bg-tertiary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #e5e7eb;
+}
+
+@property --color-text-tertiary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #9ca3af;
+}
+
+@property --color-brand-primary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4f46e5;
+}
+
+@property --color-brand-primary-light {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #818cf8;
+}
+
+@property --color-brand-primary-dark {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4338ca;
+}
+
+@property --color-brand-accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #06b6d4;
+}
+
+@property --color-brand-accent-light {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #67e8f9;
+}
+
+@property --color-brand-accent-dark {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #0891b2;
+}
+
+@property --color-border-dark {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #d1d5db;
+}
+
+@property --color-success {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #06b6d4;
+}
+
+@property --color-warning {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f59e0b;
+}
+
+@property --color-error {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ef4444;
+}
+
+@property --color-info {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4f46e5;
+}
+
+@property --color-success-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ecfeff;
+}
+
+@property --color-warning-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fffbeb;
+}
+
+@property --color-error-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fef2f2;
+}
+
+@property --color-info-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #eef2ff;
+}
+
+@property --color-amber {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f59e0b;
+}
+
+@property --color-danger {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ef4444;
+}
+
+@property --color-glass {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgba(255, 255, 255, 0.8);
+}
+
+@property --color-glass-dark {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgba(17, 24, 39, 0.8);
+}
+
+@property --gradient-card-start {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@property --gradient-card-end {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f3f4f6;
+}
+
+@property --color-dot-grid {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #e5e7eb;
+}
+
+@property --color-focus-ring {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4f46e5;
+}
+
 :root {
   --color-bg: #fafbfc;
   --color-bg-secondary: #f3f4f6;
@@ -170,30 +320,6 @@
     --color-focus-ring: #818cf8;
   }
 
-  @theme {
-    --color-bg: #111827;
-    --color-bg-secondary: #1f2937;
-    --color-bg-tertiary: #374151;
-
-    --color-text-primary: #f9fafb;
-    --color-text-secondary: #d1d5db;
-    --color-text-tertiary: #9ca3af;
-
-    --color-border: #374151;
-    --color-border-dark: #4b5563;
-
-    --color-success-bg: #0c4a6e;
-    --color-warning-bg: #78350f;
-    --color-error-bg: #7f1d1d;
-    --color-info-bg: #1e1b4b;
-
-    --color-glass: rgba(17, 24, 39, 0.8);
-    --color-glass-dark: rgba(17, 24, 39, 0.9);
-    --gradient-card-start: #1f2937;
-    --gradient-card-end: #0b1120;
-    --color-dot-grid: #374151;
-    --color-focus-ring: #818cf8;
-  }
 }
 
 :root.light {
diff --git a/web/src/app.tsx b/web/src/app.tsx
index d1359c8..a2d4fc5 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -2,9 +2,11 @@ import { MetaProvider, Title } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
+import { useTheme } from "./lib/theme";
 import "./app.css";
 
 export default function App() {
+  useTheme();
   return (
     <Router
       root={props => (
diff --git a/web/src/entry-server.tsx b/web/src/entry-server.tsx
index 401eff8..8d8b237 100644
--- a/web/src/entry-server.tsx
+++ b/web/src/entry-server.tsx
@@ -9,6 +9,9 @@ export default createHandler(() => (
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <link rel="icon" href="/favicon.ico" />
+          <script
+            innerHTML={`(function(){var t=localStorage.getItem('shieldai-theme');if(t==='light')return;if(t==='dark'){document.documentElement.classList.add('dark');return}if(window.matchMedia('(prefers-color-scheme:dark)').matches)document.documentElement.classList.add('dark')})()`}
+          />
           {assets}
         </head>
         <body>