Dark mode
暗色模式
主题由根元素的 data-theme 属性决定。语义 token 在 [data-theme="dark"] 作用域内换一组值即可整站切换——无需任何 dark: 类名遍历。
实时切换
右上角同款切换器，View Transitions 圆形揭示明暗。
点击切换整个文档站的主题
就地作用域
因为暗色 token 绑在 [data-theme="dark"]，任意子树包一层该属性即可「局部」变暗—— 下方两张卡片永远分别展示亮/暗，不随页面主题变。
Light
卡片标题
次要描述文字走 color-muted。
主按钮次按钮
Dark
卡片标题
次要描述文字走 color-muted。
主按钮次按钮
0 闪烁（anti-FOUC）
首屏在 <head> 注入内联脚本，于 React 水合前就把data-theme 写到 <html>，读 localStorage 偏好或系统 prefers-color-scheme。配合 semantic.css 同步的 color-scheme，连原生滚动条 / overscroll 回弹区都不会闪出错误底色。
代码切换
任何地方都可命令式读写主题。
// 读 document.documentElement.dataset.theme; // "light" | "dark" // 写（持久化由 useTheme/Toggler 负责） document.documentElement.dataset.theme = "dark";