主题系统

NEXTDEVKIT 包含一个基于 CSS 变量 和 Tailwind CSS 构建的强大主题系统，支持明暗模式、自定义配色方案和灵活的自定义，同时保持设计一致性。

🏗️ 主题系统架构

NEXTDEVKIT 的主题系统结构如下：

src/
├── app/
│   └── globals.css               # 主题定义和 CSS 变量
├── components/
│   └── ui/                      # 主题化 UI 组件
├── config/
│   └── index.ts                 # 主题配置
└── styles/
    └── docs-mdx.css             # 文档特定样式

🎯 核心主题功能

主题配置

NEXTDEVKIT 的主题配置位于 src/config/index.ts：

ui: {
  theme: {
    enabled: true,
    defaultMode: "system",
  },
},

配置选项：

• enabled: 是否启用明暗主题系统
• defaultMode: 未指定模式时使用的默认模式，可以是 light、dark 或 system

内置明暗模式支持

NEXTDEVKIT 提供带有平滑过渡的自动明暗模式切换：

:root {
  // ...
}

.dark {
  // ...
}

@theme inline {
  // ...
}

自定义颜色

NEXTDEVKIT 完全兼容 Tailwind CSS 的 @theme 指令，允许您使用 tweakcn 自定义颜色。

您可以在 src/app/globals.css 文件中更新主题颜色。

只需从 TweakCN 复制颜色代码并粘贴到 src/app/globals.css 文件中。

用新的颜色代码替换 :root、.dark 和 @theme inline 块。

或者您可以尝试命令 pnpm dlx shadcn@latest add 来生成主题代码。

pnpm dlx shadcn@latest add https://tweakcn.com/r/themes/claude.json

文档主题

文档主题是为文档站点定制的主题。

它位于 src/styles/docs-mdx.css 文件中。

@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";

您可以按照 Fumadocs 文档 来自定义文档主题。

🔗 相关资源

• OKLCH 色彩空间
• Tailwind CSS 主题

🎯 下一步

现在您了解了主题系统，请探索这些相关功能：

• 📊 分析统计
• 🔍 SEO
• 🌐 国际化