主题与样式

样式方案为 Tailwind CSS v4 配合语义化 CSS 变量、shadcn/ui（new-york 风格）组件与 Geist 字体。浅色与深色主题由 next-themes 驱动。

重要文件

文件	作用
`src/app/globals.css`	Tailwind 引入、主题 token（`:root` / `.dark`）
`src/components/theme-provider.tsx`	`next-themes` provider
`src/app/[locale]/layout.tsx`	Geist 字体配置 + `<html>` 类名
`components.json`	shadcn 配置（风格、别名）
`src/lib/utils.ts`	`cn()` 类名合并辅助函数

调色板以 CSS 变量形式定义在 globals.css 中——浅色用 :root 块，深色用 .dark 块——再通过 @theme inline 暴露给 Tailwind。组件引用的是语义化 token而非原始颜色，因此 bg-background、text-foreground、border-border、 bg-primary 等类名会随当前主题自动适配。

src/app/globals.css

:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --primary: #3b76f6;        /* 品牌蓝 */
  --border: #e2e8f0;
  /* …card、popover、muted、accent、ring、chart-*、sidebar-* */
}

.dark {
  --background: #090807;     /* 中性近黑 */
  --foreground: #f8fafc;
  --primary: #3b76f6;
  /* … */
}

要重新配色，只需修改这些变量——所有使用语义类名的组件都会跟随。模板还定义了设计系统扩展（--sky、--brand-subtle、--success、--warning）以及一套柔和的层次阴影。

Tailwind v4 采用 CSS 优先：没有 tailwind.config.js。主题 token、 @theme inline 映射与自定义工具类都位于 src/app/globals.css。

深色模式

next-themes 会在 <html> 上切换 .dark 类：

src/components/theme-provider.tsx

<NextThemesProvider
  attribute="class"
  defaultTheme="light"
  storageKey="theme"
  disableTransitionOnChange
>

根布局在 <html> 上设置了 suppressHydrationWarning，使主题检测导致的服务端/客户端类名不一致不会报警；disableTransitionOnChange 则避免主题切换时的颜色渐变闪烁。

排版

字体在语言布局中通过 next/font 加载，并暴露为 CSS 变量，供 --font-sans / --font-mono 主题 token 使用：

src/app/[locale]/layout.tsx

const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });

// <html className={`${geistSans.variable} ${geistMono.variable}`}>

Geist Sans 用于界面，Geist Mono 用于代码、标签与指标。

shadcn/ui 组件

components.json 配置为 new-york 风格，启用 RSC，使用 lucide 图标，并设置路径别名（@/components、@/components/ui、@/lib、@/lib/utils）。添加组件：

pnpm dlx shadcn@latest add <component>

组件会落到 src/components/ui/，并已与上述主题 token 关联。用 cn() 辅助函数（clsx + tailwind-merge）组合类名：

src/lib/utils.ts

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

去哪里找

目录	包含
`src/components/ui`	shadcn 基础组件（button、card、dialog 等）
`src/components/layout`	页头、页脚、侧边栏、导航
`src/components/motion`	动画辅助（克制、支持 reduced-motion）

重要文件

颜色 token

深色模式

排版

shadcn/ui 组件

去哪里找

相关页面

项目结构

站点、导航与元数据

On this page