iter(g203): 文档站亮暗切换与 demo 主题参数联动

apps/demo/main.ts

@@ -283,9 +283,10 @@ const orgTree = [
   { key: 'qa', label: '质量中心', children: [{ key: 'reg', label: '回归测试', disabled: true }] },
 ];
 
-// —— 主题：优先读上次选择，其次跟随系统；写 html[data-theme] 让令牌换色 ——
+// —— 主题：优先读 URL 参数（文档站 iframe 联动入口），其次上次选择，最后跟随系统；写 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');
+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 切换

packages/tools/cli/bin/ua.js

@@ -300,7 +300,8 @@ function renderDocs(index, tokens) {
 <title>@ui-arch 组件库文档</title>
 <style>
 :root{--bg:#ffffff;--surface:#f6f7f9;--text:#1c1e21;--muted:#6b7280;--border:rgba(0,0,0,.14);--accent:#185fa5;--code-bg:#101216;--code-text:#e7e9ec}
-@media (prefers-color-scheme:dark){:root{--bg:#101216;--surface:#1a1c22;--text:#e7e9ec;--muted:#888780;--border:rgba(255,255,255,.15);--accent:#378add}}
+@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#101216;--surface:#1a1c22;--text:#e7e9ec;--muted:#888780;--border:rgba(255,255,255,.15);--accent:#378add}}
+:root[data-theme=dark]{--bg:#101216;--surface:#1a1c22;--text:#e7e9ec;--muted:#888780;--border:rgba(255,255,255,.15);--accent:#378add}
 *{box-sizing:border-box}
 body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
 header{position:sticky;top:0;z-index:2;display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px 24px;background:var(--bg);border-bottom:1px solid var(--border)}
@@ -308,6 +309,8 @@ header h1{margin:0;font-size:16px;font-weight:500}
 header h1 span{color:var(--muted);font-weight:400;font-size:14px;margin-left:8px}
 #q{flex:1;min-width:220px;max-width:420px;margin-left:auto;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:13px;outline:none}
 #q:focus{border-color:var(--accent)}
+#theme{flex:none;padding:5px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px;cursor:pointer}
+#theme:hover{border-color:var(--accent)}
 nav.pkgnav{max-width:960px;margin:18px auto 0;padding:0 20px;display:flex;gap:8px;flex-wrap:wrap}
 nav.pkgnav a{font-size:12px;color:var(--accent);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:3px 12px}
 main{max-width:960px;margin:0 auto;padding:20px 20px 60px}
@@ -341,7 +344,7 @@ footer{max-width:960px;margin:0 auto;padding:0 20px 40px;color:var(--muted);font
 </style>
 </head>
 <body>
-<header><h1>@ui-arch<span>私人组件库</span></h1><input id="q" type="search" aria-label="搜索组件、参数或 API" placeholder="搜索组件、参数、API…" autocomplete="off"></header>
+<header><h1>@ui-arch<span>私人组件库</span></h1><input id="q" type="search" aria-label="搜索组件、参数或 API" placeholder="搜索组件、参数、API…" autocomplete="off"><button id="theme" type="button" aria-label="切换亮暗主题">亮色</button></header>
 <nav class="pkgnav" id="nav" aria-label="仓库导航"></nav>
 <p class="sr-only" id="hit" role="status" aria-live="polite"></p>
 <main id="app"></main>
@@ -421,6 +424,25 @@ document.getElementById('q').addEventListener('input',function(e){
   var q=e.target.value.trim().toLowerCase();
   render(q?ordered.filter(function(p){return norm(p).indexOf(q)>=0}):ordered);
 });
+// —— 主题：默认跟随系统（不写 data-theme），用户选择后持久化；iframe 演示带参重载联动 ——
+var THEME_KEY='ua-docs-theme';
+var themeBtn=document.getElementById('theme');
+function paintTheme(t){ // t: 'light'|'dark'|null，null 表示跟随系统
+  if(t)document.documentElement.setAttribute('data-theme',t);else document.documentElement.removeAttribute('data-theme');
+  themeBtn.textContent=t==='dark'?'暗色':'亮色';
+}
+var savedTheme=null;try{savedTheme=localStorage.getItem(THEME_KEY)}catch(e){}
+paintTheme(savedTheme==='dark'||savedTheme==='light'?savedTheme:null);
+themeBtn.addEventListener('click',function(){
+  var cur=document.documentElement.getAttribute('data-theme')||(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');
+  var next=cur==='dark'?'light':'dark';
+  try{localStorage.setItem(THEME_KEY,next)}catch(e){}
+  paintTheme(next);
+  document.querySelectorAll('iframe.demo').forEach(function(f){ // 带参重载：demo 读 ?theme= 切换
+    var parts=f.src.split('#');var anchor=parts.length>1?'#'+parts.slice(1).join('#'):'';
+    f.src=parts[0].split('?')[0]+'?theme='+next+anchor;
+  });
+});
 </script>
 </body>
 </html>