风格与主题
区块只使用 shadcn 主题 token(--primary, --card, --radius …),所以任何 shadcn 主题都能用,包括用 tweakcn 或 shadcn 主题编辑器做的主题。
Theme Studio
用 Theme Studio 在浏览器里搭建主题:选一个颜色预设、一组字体搭配、圆角、阴影和密度,在任意风格包下的实时仪表盘上预览,然后复制 globals.css 和 next/font 的 layout.tsx。链接会保留所有设置,分享主题很方便。
风格包
Pro 包含 12 个风格包。每个风格包只需 <html> 上的一个属性,就能重新设计所有区块、Core 组件和你自己的 shadcn 组件。goodui Native 在其 ThemeProvider 上有同样的 12 种风格(look="luxe"):
- Clean: 默认 shadcn/ui。沉稳而熟悉。
- Neobrutal: 粗边框、硬阴影、大胆的色彩。
- Glass: 柔和极光上的磨砂面板。
- Retro 98: 斜面、标题栏和一片青绿色桌面。
- 8-bit: 像素边框和街机字体。
- Terminal: 黑底绿荧光,扫描线常开。
- Editorial: 衬线标题、细线、暖纸色和牛血红。
- Soft: 黏土质感、大圆角,用阴影代替边框。
- Neon: 深海军蓝、青色和品红辉光,一层淡淡的网格。
- Paper: 卡纸上的墨线、印章徽标和等宽标签。
- Swiss: 白、黑、一抹红。扁平、方正、紧凑。
- Luxe: 近黑底色、衬线标题和金色细线。
app/layout.tsx
<html lang="en" data-style="retro98">深色模式和 shadcn 一样:给 <html> 加上 dark 类即可。每种风格都有深色变体。
减弱动态效果
当用户设置了 prefers-reduced-motion 时,终端扫描线等动画效果会关闭。