主题
学习如何自定义MkSaaS 网站的主题
本文档涵盖了MkSaaS 模板中的主题系统,并介绍如何自定义您自己的主题。
自定义主题
对于主题自定义,您可以直接修改基础主题变量,或者使用主题生成器创建自定义主题。
基础主题变量在 src/styles/globals.css 的 :root 选择器中定义,您可以修改它来更改所有主题的默认外观:
:root {
--radius: 0.5rem;
--background: oklch(1 0 0);
--foreground
学习如何自定义MkSaaS 网站的主题
本文档涵盖了MkSaaS 模板中的主题系统,并介绍如何自定义您自己的主题。
对于主题自定义,您可以直接修改基础主题变量,或者使用主题生成器创建自定义主题。
基础主题变量在 src/styles/globals.css 的 :root 选择器中定义,您可以修改它来更改所有主题的默认外观:
:root {
--radius: 0.5rem;
--background: oklch(1 0 0);
--foreground
您可以使用以下主题生成器创建自己的自定义主题,然后将 CSS 变量复制到您的 globals.css 文件中,或使用 shadcn cli 来添加并更改您的 globals.css 文件:
pnpm dlx shadcn@latest add https://tweakcn.com/r/themes/twitter.json视频教程:
下图显示默认的主题现在变成自定义主题。

自2025年11月17日起,在线切换主题功能已从模板中移除。
如果需要在线切换主题功能,可以参考这个 Pull Request 进行恢复。
或者参考这篇文章了解更多细节:How to Add a Theme Selector to Your Next.js App
现在您了解了如何在 MkSaaS 中使用主题,探索这些相关主题: