颜色主题

src/style.css

@@ -9,6 +9,139 @@ html, body {
   color: #e8e8f0;
   font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
+body {
+  color-scheme: dark;
+  --ui-app-bg: #0b0b12;
+  --ui-chrome-bg: #12121c;
+  --ui-panel-bg: #14141f;
+  --ui-surface: #171d2a;
+  --ui-surface-soft: #181f2e;
+  --ui-surface-muted: #191924;
+  --ui-surface-raised: #202a3b;
+  --ui-control-bg: #1a1a28;
+  --ui-control-bg-alt: #1e1e2e;
+  --ui-control-deep: #101725;
+  --ui-control-hover: #273246;
+  --ui-control-active: #2b3a5c;
+  --ui-hover-surface: #20202e;
+  --ui-button-surface: #202a3b;
+  --ui-border: #2a2a3c;
+  --ui-border-control: #2e2e44;
+  --ui-border-subtle: #2a3549;
+  --ui-border-strong: #344158;
+  --ui-border-button: #3a4963;
+  --ui-text-primary: #e8e8f0;
+  --ui-text: #aab;
+  --ui-text-soft: #ccd;
+  --ui-text-strong: #dde;
+  --ui-text-body: #aeb8cf;
+  --ui-text-secondary: #8a93bb;
+  --ui-text-muted: #667;
+  --ui-text-faint: #647089;
+  --ui-accent: #625ff1;
+  --ui-accent-strong: #7774ff;
+  --ui-accent-bright: #8982ff;
+  --ui-accent-text-muted: #9fb2ff;
+  --ui-accent-text-soft: #b9b6ff;
+  --ui-accent-soft: #35336a;
+  --ui-accent-soft-bg: #2b2b55;
+  --ui-accent-bg: #4540a0;
+  --ui-accent-bg-hover: #554dc2;
+  --ui-accent-button: #514dcc;
+  --ui-selected-bg: #3a5a8c;
+  --ui-selected-border: #5a7ab8;
+  --ui-focus: #8b86ff;
+  --ui-scrollbar: #3a455e;
+  --ui-scrollbar-hover: #596683;
+  --ui-popover-bg: rgba(20,20,32,.98);
+  --ui-panel-overlay: rgba(20,20,32,.97);
+  --ui-nav-bg: #191e2c;
+  --ui-nav-hover: #242b40;
+  --ui-switch-off: #39445a;
+  --ui-backdrop: rgba(5,8,15,.72);
+  --ui-backdrop-soft: rgba(5,8,15,.26);
+  --ui-backdrop-strong: rgba(6,9,15,.78);
+  --ui-overlay-soft: rgba(15,18,29,.9);
+  --ui-border-translucent: rgba(79,91,121,.72);
+  --ui-border-faint: rgba(72,84,112,.22);
+  --ui-hover-translucent: rgba(69,86,126,.22);
+  --ui-selection-translucent: rgba(107,83,221,.32);
+  --ui-focus-ring: rgba(112,101,223,.22);
+  --ui-accent-overlay: rgba(96,95,240,.85);
+  --ui-accent-halo: rgba(96,95,240,.28);
+  --ui-accent-glow: rgba(96,95,240,.8);
+  --ui-accent-cross: rgba(126,118,255,.75);
+  --ui-sunken: #0d0d14;
+  --ui-canvas-bg: #0e1219;
+  --ui-canvas-grid: #141a26;
+  background: var(--ui-app-bg);
+  color: var(--ui-text-primary);
+}
+body[data-ui-theme='gray-white'] {
+  --ui-app-bg: #24272b;
+  --ui-chrome-bg: #2d3035;
+  --ui-panel-bg: #35393e;
+  --ui-surface: #41454a;
+  --ui-surface-soft: #484c51;
+  --ui-surface-muted: #3d4146;
+  --ui-surface-raised: #50555a;
+  --ui-control-bg: #4b4f54;
+  --ui-control-bg-alt: #55595e;
+  --ui-control-deep: #303338;
+  --ui-control-hover: #5e6369;
+  --ui-control-active: #347da6;
+  --ui-hover-surface: #55595e;
+  --ui-button-surface: #50555a;
+  --ui-border: #5b6066;
+  --ui-border-control: #62686e;
+  --ui-border-subtle: #4c5055;
+  --ui-border-strong: #6a7077;
+  --ui-border-button: #70767c;
+  --ui-text-primary: #f3f5f6;
+  --ui-text: #cbd0d4;
+  --ui-text-soft: #dce0e3;
+  --ui-text-strong: #e7eaec;
+  --ui-text-body: #d1d5d9;
+  --ui-text-secondary: #b7bdc3;
+  --ui-text-muted: #9aa1a8;
+  --ui-text-faint: #8f969d;
+  --ui-accent: #3f9ed8;
+  --ui-accent-strong: #61b8ea;
+  --ui-accent-bright: #82cbef;
+  --ui-accent-text-muted: #a9d9f0;
+  --ui-accent-text-soft: #d0eaf7;
+  --ui-accent-soft: #2f6382;
+  --ui-accent-soft-bg: #346f90;
+  --ui-accent-bg: #347da6;
+  --ui-accent-bg-hover: #4295c1;
+  --ui-accent-button: #347da6;
+  --ui-selected-bg: #347da6;
+  --ui-selected-border: #61b8ea;
+  --ui-focus: #82cbef;
+  --ui-scrollbar: #6b7279;
+  --ui-scrollbar-hover: #838b92;
+  --ui-popover-bg: rgba(53,57,62,.98);
+  --ui-panel-overlay: rgba(53,57,62,.97);
+  --ui-nav-bg: #3b3f44;
+  --ui-nav-hover: #4b5055;
+  --ui-switch-off: #6a7076;
+  --ui-backdrop: rgba(20,22,24,.72);
+  --ui-backdrop-soft: rgba(20,22,24,.26);
+  --ui-backdrop-strong: rgba(18,20,22,.78);
+  --ui-overlay-soft: rgba(39,42,46,.92);
+  --ui-border-translucent: rgba(120,128,136,.72);
+  --ui-border-faint: rgba(120,128,136,.22);
+  --ui-hover-translucent: rgba(130,145,160,.18);
+  --ui-selection-translucent: rgba(63,158,216,.26);
+  --ui-focus-ring: rgba(63,158,216,.24);
+  --ui-accent-overlay: rgba(63,158,216,.85);
+  --ui-accent-halo: rgba(63,158,216,.28);
+  --ui-accent-glow: rgba(63,158,216,.8);
+  --ui-accent-cross: rgba(97,184,234,.75);
+  --ui-sunken: #2d3034;
+  --ui-canvas-bg: #4b4d51;
+  --ui-canvas-grid: #55585d;
+}
 body { position: fixed; inset: 0; }
 * { box-sizing: border-box; }
 #app { position: fixed; inset: 0; width: auto; height: auto; overflow: clip; }