Refine settings and panel preferences

src/app.css

@@ -22,6 +22,23 @@
   --shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
 }
 
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --page-bg: #111827;
+  --surface: #18212f;
+  --surface-muted: #1f2937;
+  --border: #334155;
+  --border-strong: #475569;
+  --text: #f8fafc;
+  --muted: #94a3b8;
+  --accent: #60a5fa;
+  --accent-muted: rgba(96, 165, 250, 0.15);
+  --success: #4ade80;
+  --warning: #fbbf24;
+  --danger: #f87171;
+  --shadow: 0 1px 2px rgba(2, 6, 23, 0.35);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -372,13 +389,13 @@ button,
 .usage-bar {
   height: 8px;
   border-radius: 999px;
-  background: #eceff3;
+  background: color-mix(in srgb, var(--border) 70%, transparent);
   overflow: hidden;
 }
 
 .usage-bar div {
   height: 100%;
-  background: #94a3b8;
+  background: color-mix(in srgb, var(--accent) 55%, var(--muted));
 }
 
 .event-row,
@@ -608,8 +625,8 @@ pre {
   overflow: auto;
   border: 1px solid var(--border);
   border-radius: 10px;
-  background: #fbfbfc;
-  color: #1f2937;
+  background: color-mix(in srgb, var(--surface-muted) 80%, var(--surface));
+  color: var(--text);
   font: 13px/1.55 Consolas, "Courier New", monospace;
 }