样式与主题定制

颜色系统概览

项目的所有颜色均使用 HSL 格式的 CSS 变量定义，集中管理在 src/app/global.css 文件中。这种方式使得全局换色只需修改几个变量值，无需逐一查找组件。

颜色变量分为亮色模式（:root）和暗色模式（.dark）两套，浏览器会根据用户偏好自动切换。

修改主色调

找到 src/app/global.css 中的 --brand 和 --primary 变量，同时修改亮色和暗色模式下的值。

当前默认值（蓝色）

/* 亮色模式 */
:root {
  --brand: 221 100% 60%;
  --brand-hover: 221 100% 55%;
  --primary: 221 100% 60%;
  --primary-foreground: 0 0% 100%;
}

/* 暗色模式 */
.dark {
  --brand: 221 100% 65%;
  --brand-hover: 221 100% 70%;
  --primary: 221 100% 65%;
  --primary-foreground: 0 0% 100%;
}

示例：改为绿色主题

/* 亮色模式 */
:root {
  --brand: 142 76% 36%;
  --brand-hover: 142 76% 30%;
  --primary: 142 76% 36%;
  --primary-foreground: 0 0% 100%;
}

/* 暗色模式 */
.dark {
  --brand: 142 76% 42%;
  --brand-hover: 142 76% 48%;
  --primary: 142 76% 42%;
  --primary-foreground: 0 0% 100%;
}

提示：修改颜色后刷新页面即可预览效果，无需重启开发服务器。

核心颜色变量表

变量	作用
`--background`	页面主背景色
`--foreground`	页面主文字颜色
`--card`	卡片背景色
`--border`	边框颜色
`--accent`	强调背景色（悬停状态等）
`--muted`	柔和背景色（次要区域）
`--muted-foreground`	柔和文字颜色（辅助说明文字）
`--primary`	主要交互色（按钮、链接）
`--primary-foreground`	主要交互色上的文字颜色
`--brand`	品牌色（Logo 相关、重点高亮）
`--brand-hover`	品牌色悬停状态

暗色模式

暗色模式通过 .dark 选择器实现。只需在 .dark 块中覆盖对应的 CSS 变量即可：

.dark {
  --background: 224 71% 4%;
  --foreground: 213 31% 91%;
  --card: 224 71% 6%;
  --border: 216 34% 17%;
  --muted: 223 47% 11%;
  --muted-foreground: 215 20% 65%;
}

项目默认支持亮色/暗色切换，用户可通过页面右上角的主题切换按钮切换。

阴影 Token

项目定义了统一的阴影变量，用于保持视觉层次一致性：

:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

在组件中使用：

<div class="shadow-sm">轻阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">大阴影</div>

修改字体

字体在 src/app/layout.tsx 中通过 next/font/google 导入，当前使用 Plus Jakarta Sans：

import { Plus_Jakarta_Sans } from "next/font/google";

const fontSans = Plus_Jakarta_Sans({
  subsets: ["latin"],
  variable: "--font-sans",
});

如需更换为其他 Google 字体，例如 Inter：

import { Inter } from "next/font/google";

const fontSans = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

next/font 会自动优化字体加载（自托管、预加载、消除布局偏移），无需额外配置 CDN。

Tailwind 使用方式

颜色变量通过 @theme 指令映射为 Tailwind CSS class，可以直接在 JSX 中使用：

{/* 使用品牌色 */}
<button className="bg-brand text-white hover:bg-brand-hover">
  按钮
</button>

{/* 使用主色调 */}
<a className="text-primary hover:underline">链接</a>

{/* 使用背景和前景 */}
<div className="bg-background text-foreground">
  内容区域
</div>

{/* 使用柔和色 */}
<span className="text-muted-foreground bg-muted px-2 py-1 rounded">
  辅助标签
</span>

这种映射关系意味着你只需修改 global.css 中的 CSS 变量值，所有使用对应 Tailwind class 的组件都会自动更新。