iter(g137): 演示页补暗色主题开关

.ua/backlog.json

@@ -1452,6 +1452,14 @@
       "acceptance": "link 支持 href/label/target/external/muted/disabled/onClick，站外自动补 ↗ 与 rel 并播报新窗口，禁用去 href 保留 aria-disabled；样式只消费 --ua-*；文档与演示同步；npm run check 全绿",
       "notes": "自补：组件补充方向",
       "status": "done"
+    },
+    {
+      "id": "g137",
+      "title": "演示页补暗色主题开关",
+      "motivation": "tokens 里有 [data-theme=dark] 整套令牌，但演示页从未切换过：暗色令牌长期无人验证，页面自有 --page-* 变量也只跟系统偏好、不跟显式主题",
+      "acceptance": "演示页头部提供暗色主题开关（写 html[data-theme]，localStorage 记忆，初值跟随系统）；--page-* 变量响应 data-theme，媒体查询只在未显式指定时生效；npm run check 全绿",
+      "notes": "自补：演示页完善",
+      "status": "open"
     }
   ]
 }

apps/demo/build.mjs

@@ -44,7 +44,7 @@ const html = `<!DOCTYPE html>
 <style>
 ${css}
 :root{--page-bg:#ffffff;--page-text:#1c1e21;--page-muted:#6b7280;--page-border:rgba(0,0,0,.14)}
-@media (prefers-color-scheme:dark){:root{--page-bg:#101216;--page-text:#e7e9ec;--page-muted:#888780;--page-border:rgba(255,255,255,.15)}}
+:root[data-theme=dark]{--page-bg:#101216;--page-text:#e7e9ec;--page-muted:#888780;--page-border:rgba(255,255,255,.15)}@media (prefers-color-scheme:dark){:root:not([data-theme]){--page-bg:#101216;--page-text:#e7e9ec;--page-muted:#888780;--page-border:rgba(255,255,255,.15)}}
 *{box-sizing:border-box}
 body{margin:0;background:var(--page-bg);color:var(--page-text);font:14px/1.7 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
 .shell{max-width:1160px;margin:0 auto;padding:36px 20px 80px;display:grid;grid-template-columns:190px minmax(0,1fr);gap:36px}
@@ -61,7 +61,7 @@ body{margin:0;background:var(--page-bg);color:var(--page-text);font:14px/1.7 -ap
 @media (max-width:820px){.shell{grid-template-columns:1fr;gap:0}.toc{display:none}}
 html{scroll-behavior:smooth}
 @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
-header{margin-bottom:30px}
+header{margin-bottom:30px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
 h1{font-size:20px;font-weight:500;margin:0}
 .sub{color:var(--page-muted);font-size:13px;margin:8px 0 0}
 .sec{margin-bottom:40px}

apps/demo/main.ts

@@ -1,4 +1,4 @@
-import { computed, h, mount, renderList, signal } from '@ui-arch/frame';
+import { computed, effect, h, mount, renderList, signal } from '@ui-arch/frame';
 
 /*** 演示用内联 SVG 图片（data URI，离线可用） ***/
 const IMG_DEMO = 'data:image/svg+xml;utf8,' + encodeURIComponent(
@@ -272,14 +272,25 @@ const orgTree = [
   { key: 'qa', label: '质量中心', children: [{ key: 'reg', label: '回归测试', disabled: true }] },
 ];
 
+// —— 主题：优先读上次选择，其次跟随系统；写 html[data-theme] 让令牌换色 ——
+const THEME_KEY = 'ua-demo-theme';
+const dark = signal((localStorage.getItem(THEME_KEY) ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')) === 'dark');
+effect(() => {
+  const mode = dark() ? 'dark' : 'light';
+  document.documentElement.dataset.theme = mode; // 令牌按 data-theme 切换
+  localStorage.setItem(THEME_KEY, mode); // 记住选择，刷新不闪
+});
+
 const content = h(
   'div',
   { class: 'page' },
   h(
     'header',
     null,
-    h('h1', null, '@ui-arch 组件库 · 现场演示'),
-    h('p', { class: 'sub' }, '驱动：@ui-arch/frame（自研微框架） + @ui-arch/ui（组件库） + @ui-arch/table-core（表格内核）'),
+    h('div', null,
+      h('h1', null, '@ui-arch 组件库 · 现场演示'),
+      h('p', { class: 'sub' }, '驱动：@ui-arch/frame（自研微框架） + @ui-arch/ui（组件库） + @ui-arch/table-core（表格内核）')),
+    switchButton({ label: '暗色主题', checked: dark }), // 切换 html[data-theme]，令牌整套换色
   ),
   section(
     'sec-counter',