iter(g157): 补配方 10 暗色主题切换

说清三件事：只切 data-theme 不改令牌名、初值先读 localStorage、同步 color-scheme 让原生控件跟色。MCP get_recipe 10 可取骨架。
2026-10-26 15:56:56 +08:00
parent 1831aecab6
commit c2412fb360
4 changed files with 45 additions and 0 deletions
@@ -184,6 +184,24 @@ grid({ columns: 2, gutter: 'lg' },
 - 标题一律 `typography({ variant: 'title', level })` 出语义 `h1-h5`；正文长文本用 `ellipsis` 截断并自动挂 `title` 看全文。
 - 只读字段用 `descriptions`（不要用 `form`）：`form` 承载输入与校验，`descriptions` 只负责 label:value 对齐。

+## 配方 10：暗色主题切换（只切 data-theme，不改令牌名）
+
+```ts
+const saved = localStorage.getItem('ua-theme');
+const dark = signal(saved ? saved === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches);
+effect(() => {
+  document.documentElement.dataset.theme = dark() ? 'dark' : 'light';
+  document.documentElement.style.colorScheme = dark() ? 'dark' : 'light'; // 原生控件（date/滚动条）跟着变
+  localStorage.setItem('ua-theme', dark() ? 'dark' : 'light');
+});
+floatButton({ icon: '🌗', label: '切换主题', onClick: () => dark(!dark()) });
+```
+
+要点：
+- 只改 `[data-theme]` 的取值：暗色是令牌**值**的另一套，名字永远不变，组件样式一律不写主题判断。
+- 初值顺序是「先 localStorage、再 prefers-color-scheme」；反过来会让用户的手动选择被系统偏好覆盖。
+- 同步设置 `color-scheme`，否则原生控件（日期选择、滚动条）在暗色下仍是白底。
+
 ## 通用约定

 - 状态一律放信号（`signal` / `computed`），组件只读写信号，不持有业务数据副本。