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

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',