主题

本文档涵盖了MkSaaS 模板中的主题系统，并介绍如何自定义您自己的主题。

自定义主题

对于主题自定义，您可以直接修改基础主题变量，或者使用主题生成器创建自定义主题。

基础主题变量在 src/styles/globals.css 的 :root 选择器中定义，您可以修改它来更改所有主题的默认外观：

:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  /* 根据需要修改其他变量 */
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  /* 根据需要修改暗黑模式变量 */
}

主题生成器

您可以使用以下主题生成器创建自己的自定义主题，然后将 CSS 变量复制到您的 globals.css 文件中，或使用 shadcn cli 来添加并更改您的 globals.css 文件：

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

• shadcn/ui 主题生成器
• tweakcn 主题生成器
• ui.pub 主题生成器

视频教程：

下图显示默认的主题现在变成自定义主题。

常见问题

在线切换主题

自2025年11月17日起，在线切换主题功能已从模板中移除。

如果需要在线切换主题功能，可以参考这个 Pull Request 进行恢复。

或者参考这篇文章了解更多细节：How to Add a Theme Selector to Your Next.js App

最佳实践

• 颜色对比：确保文本颜色与背景颜色有足够的对比度以便于访问
• 测试两种模式：如果开启明暗模式，确保在两种模式下测试新主题
• 限制主题选项：提供少量精心设计的主题，而不是许多相似的选项
• 主题一致性：在不同主题之间保持一致的样式，以避免 UI 异常

视频教程

下一步

现在您了解了如何在 MkSaaS 中使用主题，探索这些相关主题：