feat(ui): implement dark/light theme switch

reaction_board/web/static/style.css

@@ -1,5 +1,5 @@
 :root {
-  color-scheme: light dark;
+  color-scheme: light;
   --bg: #f7f2ea;
   --bg-deep: #efe7db;
   --surface: #fffdf9;
@@ -29,32 +29,32 @@
   --nav-height: 64px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #1b1411;
-    --bg-deep: #140f0c;
-    --surface: #221a15;
-    --surface-2: #2a201a;
-    --surface-3: #342820;
-    --text: #f3e9dc;
-    --muted: #c9b6a0;
-    --faint: #9c8976;
-    --border: #3a2c22;
-    --grid: #3a2c22;
-    --accent: #e9b97c;
-    --accent-strong: #f6d9ae;
-    --accent-soft: #e9b97c29;
-    --accent-contrast: #2a1a10;
-    --blue: #a8bccc;
-    --blue-soft: #a8bccc1f;
-    --pink: #e3958c;
-    --warning: #e9b97c;
-    --warning-soft: #e9b97c1f;
-    --danger: #e3958c;
-    --success: #a7b98f;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-    --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.55);
-  }
+/* 深色配色由 data-theme 决定；该属性在首屏绘制前由 /static/theme.js 写入。 */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #1b1411;
+  --bg-deep: #140f0c;
+  --surface: #221a15;
+  --surface-2: #2a201a;
+  --surface-3: #342820;
+  --text: #f3e9dc;
+  --muted: #c9b6a0;
+  --faint: #9c8976;
+  --border: #3a2c22;
+  --grid: #3a2c22;
+  --accent: #e9b97c;
+  --accent-strong: #f6d9ae;
+  --accent-soft: #e9b97c29;
+  --accent-contrast: #2a1a10;
+  --blue: #a8bccc;
+  --blue-soft: #a8bccc1f;
+  --pink: #e3958c;
+  --warning: #e9b97c;
+  --warning-soft: #e9b97c1f;
+  --danger: #e3958c;
+  --success: #a7b98f;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.55);
 }
 
 * { box-sizing: border-box; }
@@ -127,6 +127,25 @@ h1, h2, h3, strong, b { font-weight: 600; }
   font-size: 11px;
 }
 .topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
+/* 主题切换：图标表示当前主题，提示文案说明将要切换到的主题。 */
+.theme-toggle {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--muted);
+  cursor: pointer;
+}
+.theme-toggle:hover {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+}
+.theme-toggle svg { width: 16px; height: 16px; }
 .topbar-links { display: flex; align-items: center; gap: 6px; }
 .topbar-links a {
   padding: 4px 10px;
@@ -167,9 +186,6 @@ h1, h2, h3, strong, b { font-weight: 600; }
   color: var(--accent-contrast);
   background: var(--accent);
 }
-@media (prefers-color-scheme: dark) {
-  .preview-banner { color: var(--accent-contrast); background: var(--accent); }
-}
 
 .main-shell {
   padding: 12px 12px calc(var(--nav-height) + 28px + env(safe-area-inset-bottom));