diff --git a/understand-anything-plugin/packages/dashboard/src/index.css b/understand-anything-plugin/packages/dashboard/src/index.css
index 321702c..e702b6f 100644
--- a/understand-anything-plugin/packages/dashboard/src/index.css
+++ b/understand-anything-plugin/packages/dashboard/src/index.css
@@ -1,26 +1,39 @@
 @import "tailwindcss";
 
 @theme {
-  /* Dark luxury color palette */
+  /* Base */
   --color-root: #0a0a0a;
   --color-surface: #111111;
   --color-elevated: #1a1a1a;
   --color-panel: #141414;
 
-  /* Accent spectrum */
+  /* Accent */
   --color-accent: #d4a574;
   --color-accent-dim: #c9a96e;
   --color-accent-bright: #e8c49a;
 
-  /* Text hierarchy */
+  /* Text */
   --color-text-primary: #f5f0eb;
   --color-text-secondary: #a39787;
   --color-text-muted: #6b5f53;
 
-  /* Border tokens */
+  /* Borders */
   --color-border-subtle: rgba(212, 165, 116, 0.12);
   --color-border-medium: rgba(212, 165, 116, 0.25);
 
+  /* Node types */
+  --color-node-file: #4a7c9b;
+  --color-node-function: #5a9e6f;
+  --color-node-class: #8b6fb0;
+  --color-node-module: #c9a06c;
+  --color-node-concept: #b07a8a;
+
+  /* Diff */
+  --color-diff-changed: #e05252;
+  --color-diff-affected: #d4a030;
+  --color-diff-changed-dim: rgba(224, 82, 82, 0.25);
+  --color-diff-affected-dim: rgba(212, 160, 48, 0.25);
+
   /* Glass */
   --glass-bg: rgba(20, 20, 20, 0.8);
   --glass-bg-heavy: rgba(20, 20, 20, 0.95);
@@ -41,33 +54,24 @@
   --color-edge-dim: rgba(212, 165, 116, 0.08);
   --color-edge-dot: rgba(212, 165, 116, 0.15);
 
-  /* Layer group (accent-based overlays) */
+  /* Accent overlays */
   --color-accent-overlay-bg: rgba(212, 165, 116, 0.05);
   --color-accent-overlay-border: rgba(212, 165, 116, 0.25);
 
-  /* kbd */
+  /* Kbd */
   --kbd-bg: rgba(212, 165, 116, 0.1);
 
-  /* Node type colors (muted, refined) */
-  --color-node-file: #4a7c9b;
-  --color-node-function: #5a9e6f;
-  --color-node-class: #8b6fb0;
-  --color-node-module: #c9a06c;
-  --color-node-concept: #b07a8a;
-
-  /* Diff overlay colors */
-  --color-diff-changed: #e05252;
-  --color-diff-affected: #d4a030;
-  --color-diff-changed-dim: rgba(224, 82, 82, 0.25);
-  --color-diff-affected-dim: rgba(212, 160, 48, 0.25);
-
-  /* Fonts */
+  /* Typography */
   --font-serif: 'DM Serif Display', Georgia, serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   --font-sans: 'Inter', system-ui, sans-serif;
 }
 
 /* Base styles */
+html {
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
 body {
   font-family: var(--font-sans);
   background-color: var(--color-root);
@@ -207,3 +211,26 @@ body {
 .react-flow__background {
   background-color: var(--color-root) !important;
 }
+
+/* Light theme overrides */
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+[data-theme="light"] .diff-faded {
+  opacity: 0.35;
+}
+
+[data-theme="light"] ::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="light"] .warning-banner {
+  background: rgba(180, 130, 30, 0.1);
+  border-color: rgba(180, 130, 30, 0.3);
+  color: #92600a;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}