Documentation
定制化

自定义主题

自定义应用的颜色、样式和视觉风格

VibeAny 使用 Shadcn UI 构建主题系统，支持亮色/暗色模式切换。主题配置文件位于 src/config/style/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);
  ...
}

以下为你提供了一些工具，帮助你快速构建属于自己的主题。

Shadcn

  • 借助官方的 Shadcn Create 工具
  • 借助 Shadcn Themes 工具，你可以快速生成主题色，并复制到 src/config/style/theme.css 文件中。

Shadcn Theme

Tweakcn

  • 借助 Tweakcn 工具，你可以快速生成主题色，并复制到 src/config/style/theme.css 文件中。

Tweakcn Theme

Themux

  • 借助 Themux 工具，你可以快速生成主题色，并复制到 src/config/style/theme.css 文件中。

Themux Theme

UI Pub

  • 借助 UI Pub 工具，你可以快速生成主题色，并复制到 src/config/style/theme.css 文件中。

UI Pub Theme

Shadcn Studio

  • 借助 Shadcn Studio 工具，你可以快速生成主题色，并复制到 src/config/style/theme.css 文件中。

Shadcn Studio Theme

自定义应用信息 & SEO

配置应用的基本信息，包括名称、描述、Logo 和社交链接

自定义多语言

配置应用的国际化内容和多语言支持

目录

ShadcnTweakcnThemuxUI PubShadcn Studio