CSS 主题 Token 预览
粘贴 CSS 变量 token 后，实时预览主题色、卡片、文字和按钮风格，适合主题系统起稿、变量校对和设计 token 对照。
Token 输入
移动端优先完整输入 token，桌面端再和主题预览并排。
主题预览
统一展示主题预览、token 列表和能力边界，手机上也能顺着往下看。
预览已更新
当前 token 已成功解析并应用到右侧主题卡片，可继续核对背景、文字、卡片和主按钮之间的层级关系，再决定是否回左侧微调变量值。
当前状态
Token 数量
9
解析状态
成功
Theme preview
Preview Card
当前卡片和按钮直接读取你输入的 CSS variables，方便同时观察 token 是否协调。
Token 列表
--background#0f172a
--foreground#f8fafc
--cardrgba(255, 255, 255, 0.08)
--card-foreground#e2e8f0
--primary#8b5cf6
--primary-foreground#ffffff
--mutedrgba(255, 255, 255, 0.12)
--muted-foreground#cbd5e1
--borderrgba(255, 255, 255, 0.18)
下一步建议
如果主题观感已接近预期，优先复制摘要留档或继续补齐缺失的语义 token；如果层级不协调，先回左侧调整 background / foreground / primary / muted 这一组核心变量。
能力边界
当前版本只解析 CSS 变量声明，不执行完整样式表解析，也不推导 token 依赖链；适合做基础主题预览和变量核对。