Android · Material 3
全圆角、state layer、波纹；Material Design 3 的默认触感。官方色：Senti 蓝。
MATERIALS
选择主题
每套材质都有各自的官方配色：M3 蓝、Apple iOS 蓝、Windows 11 蓝、shadcn zinc 灰阶、 Cyberpunk 荧光绿。点选会同时切换材质与配色，并按主题记住各自的颜色；页面底部 仍然可以改种子色、覆盖单个角色，或添加自己的颜色变量。
当前主题 {{skinLabel}}
data-skin="{{skin}}"
Apple · 毛玻璃
半透明表面 + backdrop blur、连续圆角、外侧柔光焦点环，无波纹。官方色：iOS 蓝。
Microsoft · Windows 11
4px 控件 / 8px 表面、Segoe UI、Mica 表面与 Acrylic 浮层。官方色：Windows 蓝。
shadcn · 扁平
6px 圆角、1px 细描边、极轻阴影、外扩 focus ring。官方色：zinc 灰阶。
Cyberpunk · 霓虹终端
零圆角、等宽字、霓虹描边与外发光、方形开关 / 滑块拇指；选中时会一并套用荧光绿配色；深色优先，浅色模式可手动切回。
每套主题 = 材质 + 官方配色。切换时会保存当前主题的颜色，切回来时恢复；
M3 的槽位承接你原本的品牌色，所以从 Cyberpunk 回到 M3 会得到进入前的配色。
深浅模式（自动 / 浅色 / 深色）是全局设置，切换主题默认不会改变它；唯一例外是 Cyberpunk（深色优先）：
从浅色 / 自动+系统浅色进入时会切到深色（自动+系统已是深色则保持自动），之后切到其他主题也继续保持深色。
Cyberpunk 也有自己的浅色模式，可手动切回。
对比度不跨材质记忆：切到某套主题时始终回到它的默认值（Cyberpunk 100%，其余 0%）。
皮肤 CSS 本身仍然只写 token、不写颜色，setSkin() 也只换材质；
这套主题预设只存在于官网演示层。
COLOR / M3
改色与加色
颜色不归皮肤管。这里调用 Google Material Color Utilities 的 HCT 算法：
改种子色会重算整套 M3 角色；也可以单独覆盖某个角色，或添加
brand 这样的自定义颜色变量。
完整颜色工具
种子色
恢复默认
种子色驱动 primary / secondary / tertiary 与全部 surface 中性色；on-* 与 container 配对由色相和 M3 tone 规则自动推导。
对比度
{{contrastPct}}%
对比度调整：正值提高对比度（角色色更鲜明、表面更极端，霓虹 / 游戏主题拉到 80–100%）；0 为标准 M3；负值降低对比度（表面与文字互相靠拢，适合柔和的可爱主题）。分角色精细调节在 完整颜色工具。
--md-sys-color-primary
--md-sys-color-secondary
--md-sys-color-tertiary
--md-sys-color-error
--md-sys-color-success
自定义颜色
追加 --name / --on-name / --name-container / --on-name-container，组件用 color="name" 消费。
还没有自定义颜色。添加一个变量，就能在任意组件上写 color="brand"。
{{colorStatus}}
TOKENS / LIGHT + DARK
可用色块变量
左右两块分别用对应模式的 surface-container 铺底，同一套 token 在白天 / 黑夜下的 真实背景与文字对比都按该模式呈现；点击变量名或色块均可复制。种子色、角色覆盖和自定义色改动会实时重算。
白天 · LIGHT
color-scheme: light
黑夜 · DARK
color-scheme: dark