VibeAny

VibeAny 使用语义 CSS 变量与 Shadcn UI 构建主题系统，支持亮色/暗色切换。src/config/style/theme.css 定义默认主题和后台样式。访客主题在此基础上加载 palettes.css 的配色，以及 brand-profiles.css 的字体、间距、圆角、标签页、浮层和动效角色。

修改访客样式时，请编辑 src/config/style/brand-profiles.css 中的对应配置。[data-theme='name'] 与 [data-theme='name'].dark 共享布局和组件样式，配色文件分别处理亮色与暗色。保持 --spacing 为 0.25rem，通过 --section-space、--card-padding、--control-height、--field-gap 等语义变量调整疏密。

type-display、type-heading、type-body、type-label、type-numeric 和 type-note 工具类读取最近主题范围内的字体角色。Notebook 只在标题与注释中使用手写字体，正文和表单使用清晰的无衬线字体。fonts.css 中固定版本的 Fontsource CDN 字体按需加载拉丁字符；中文标题使用设备上的衬线字体栈，正文回退到系统无衬线字体，不额外下载大型中文字库。

使用 rounded-input、rounded-card、rounded-overlay、rounded-icon 和 rounded-tab 表达组件圆角角色。shadow-control、shadow-surface、shadow-overlay 及标准阴影工具类读取运行时变量，并保留焦点环。新增变量时应同时在 :root 与 .palette-preview 声明默认值，让嵌套预览能够恢复默认样式。

装饰色 --brand-spark-violet、--brand-spark-ember 独立于任务状态 --generative、积分 --credit 和错误色。编辑配色时请保持这些业务角色可读。动效变量遵循用户的 prefers-reduced-motion 偏好。

页面构图由 landing-brands.css 中的有限配方控制，组件通过 BrandProvider 获取服务器选定的主题，使用自身的 data-brand 选择构图。预览嵌套页面组件时，同时设置 .palette-preview 的 data-theme 和 BrandProvider，分别隔离视觉变量与组件结构。浮层默认挂载在 document 下，继承页面主题；后台选择器的预览保持非交互，避免预览弹层越出主题边界。

主题	识别规则
Astro Vista	非对称首屏、轨道图形、不等权功能网格
Claude	衬线标题、编辑器与引言、阅读式功能条目
Light Green	有机形状、交错模块、宽松圆润控件
Mono	等宽记录、编号与规则线、紧凑操作区
Neobrutualism	海报字号、粗边框、偏移硬阴影与按压反馈
Notebook	纸张页边线、批注、章节编号和页签
Supabase	服务连接图、代码标签、分层控制面板
Vercel	大幅几何标题、精确网格、黑白面积反差
WhatsApp	气泡、头像、消息分组与舒适触达
Zen	窄阅读栏、大留白、少边界和静态反馈

桌面密度由每个主题的控件高度与信息行高控制；手机及触屏使用至少 44px 的主要控件尺寸。停用评价滚动的主题，以及开启减少动态效果的设备，使用完整静态网格展示评价。

修改默认主题或后台颜色时，请编辑 theme.css 对应变量：

src/config/style/theme.css

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  ...
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.141 0.005 285.823);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.141 0.005 285.823);
  --popover-foreground: oklch(0.985 0 0);
  ...
}