自定义主题
设置主题样式
在 快速开始 文档中，初始化项目并启动开发服务器，在浏览器打开预览地址，可以看到默认的主题页面。
ShipAny 基于 shadcn/ui 实现主题样式切换功能，你可以选择任何一个 shadcn 样式生成器来生成主题样式，自定义 主题配色 和 字体效果，让你的网站项目更加个性化。
推荐使用 tweakcn 作为主题样式生成器。
- 在 tweakcn 样式设计面板 左上角切换预览，选择一套自己喜欢的主题样式。点击右上角的
Code按钮，打开Theme Code面板。
- 在
Theme Code面板，选择Tailwind v4+oklcn，点击右侧的Copy按钮，复制主题样式代码。
-
将主题样式代码，粘贴到 ShipAny 项目的
src/config/style/theme.css文件中，替换掉默认的样式代码。 -
再次打开项目预览地址，可以看到新的样式效果。
管理后台的主题样式也同步更新了。
设置外观
ShipAny 项目通过 .env* 文件中的 NEXT_PUBLIC_APPEARANCE 变量，控制项目默认显示的外观。此变量的默认值是 system，会根据用户电脑设置的系统主题自动切换 light 或 dark 模式。
如果你希望默认显示暗色主题，可以设置
NEXT_PUBLIC_APPEARANCE = "dark"这样，用户初次访问你的网站时，看到的就是暗色主题了。
设置主题文件夹
ShipAny 支持多主题系统。基于此，你可以自定义自己的主题，实现更加个性化的页面效果。
默认的主题基于 shadcn + tailark 实现，对应的主题文件夹是 src/themes/default。
以 ShipAny 官网 为例，演示如何设置主题文件夹，实现自定义主题效果。
- 先修改配置文件，启用自定义的主题
NEXT_PUBLIC_THEME = "shipany"- 创建主题文件夹
在 src/themes 文件夹，根据配置的自定义主题名称，创建主题文件夹。
比如，这里需要创建的主题文件夹是 src/themes/shipany
- 实现主题内容
参考 src/themes/default 文件夹的主题文件内容，实现自定义的主题文件内容。
当访问项目页面路由时，优先从配置的主题加载对应的页面文件，如果配置的主题中找不到对应的页面文件，则会加载默认的主题页面文件。
按照下面自定义主题 shipany 的文件结构示例。
- 访问
/,/pricing,/showcases页面时，显示的是src/themes/shipany/pages/{landing,pricing,showcases}.tsx文件内容。 - 访问
/blog,/blog/xxx,/terms-of-service,/privacy-policy等页面时，因为在自定义的主题文件夹中没有对应的页面文件，回退显示src/themes/default/pages/{blog,blog-detail,page-detail}.tsx等文件内容。 - 访问
/templates,/templates/xxx页面时，在默认的主题系统中无定义，你需要先创建对应的页面路由文件：src/app/[locale]/(landing)/templates/page.tsx和src/app/[locale]/(landing)/templates/[name]/page.tsx，再引入主题页面文件进行展示。
页面路由文件 src/app/[locale]/(landing)/templates/page.tsx 内容示例：
import { getThemePage } from '@/core/theme';
import { getTemplates } from '@/shared/models/template';
export default async function TemplatesPage({
params,
searchParams,
}: {
params: Promise<{ locale: string }>;
searchParams: Promise<{
page?: number;
pageSize?: number;
}>;
}) {
const { locale } = await params;
const { page: pageNum, pageSize } = await searchParams;
const page = pageNum || 1;
const limit = pageSize || 30;
// get templates from database
const templatesData = await getTemplates({ page, limit });
// load page component
const Page = await getThemePage('templates');
return <Page locale={locale} templates={templatesData} />;
}访问 /templates 页面时，优先从 src/themes/shipany/pages 找页面文件，找不到再回退显示 src/themes/default/pages 下面的同名文件。
- 预览自定义主题
访问 ShipAny 官网 ，可以看到自定义主题的效果。
light 模式：
dark 模式：
参考上述自定义主题的流程，你可以选择任意你喜欢的 UI 组件库，根据你的业务特点，定制自己的项目主题，让你的项目更加地高端大气。
流行的组件库推荐：