iter(g332): 主题工具下沉到组件库

apps/demo/main.ts

@@ -64,6 +64,7 @@ import {
   menu,
   masonry,
   editable,
+  theme,
   modal,
   mentions,
   multiSelect,
@@ -326,15 +327,9 @@ const orgTree = [
   { key: 'qa', label: '质量中心', children: [{ key: 'reg', label: '回归测试', disabled: true }] },
 ];
 
-// —— 主题：优先读 URL 参数（文档站 iframe 联动入口），其次上次选择，最后跟随系统；写 html[data-theme] 让令牌换色 ——
-const THEME_KEY = 'ua-demo-theme';
-const themeParam = new URLSearchParams(location.search).get('theme'); // ?theme=dark|light，iframe 带参重载时生效
-const dark = signal(((themeParam === 'dark' || themeParam === 'light' ? themeParam : null) ?? 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); // 记住选择，刷新不闪
-});
+// —— 主题：URL 参数（文档站 iframe 联动）> 上次选择 > 跟随系统；优先级、落盘与系统偏好监听都收在 theme() 里 ——
+const th = theme({ storageKey: 'ua-demo-theme' }); // 与文档站 iframe 共用 ?theme=dark|light 入口
+const dark = th.dark; // 实际生效是否暗色：system 档下也跟随系统，控件直接绑它
 
 // —— 拖拽排序演示：顺序写回信号，下方摘要随之刷新 ——
 const sortableOrder = signal(['需求评审', '接口联调', '灰度发布', '线上回归']);
@@ -349,7 +344,7 @@ const content = h(
     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]，令牌整套换色
+    switchButton({ label: '暗色主题', checked: dark, onChange: (v) => th.set(v ? 'dark' : 'light') }), // 切换 html[data-theme]，令牌整套换色（记忆写回由 theme 负责）
   ),
   section(
     'sec-counter',