Custom Theme

Set Theme Style

In the Quick Start document, initialize the project and start the development server. Open the preview address in the browser, and you can see the default theme page.

ShipAny implements the theme style switching function based on shadcn/ui. You can choose any shadcn style generator to generate theme styles, customize Theme Colors and Font Effects, and make your website project more personalized.

It is recommended to use tweakcn as a theme style generator.

Switch preview in the upper left corner of the tweakcn style design panel and choose a theme style you like. Click the Code button in the upper right corner to open the Theme Code panel.

In the Theme Code panel, select Tailwind v4 + oklcn, and click the Copy button on the right to copy the theme style code.

Paste the theme style code into the src/config/style/theme.css file of the ShipAny project, replacing the default style code.
Open the project preview address again to see the new style effect.

The theme style of the management background has also been updated synchronously.

Set Appearance

The ShipAny project controls the default appearance of the project through the NEXT_PUBLIC_APPEARANCE variable in the .env* file. The default value of this variable is system, which will automatically switch between light or dark mode according to the system theme set by the user's computer.

If you want to display the dark theme by default, you can set

NEXT_PUBLIC_APPEARANCE = "dark"

In this way, when users visit your website for the first time, they will see the dark theme.

Set Theme Folder

ShipAny supports a multi-theme system. Based on this, you can customize your own theme to achieve more personalized page effects.

The default theme is implemented based on shadcn + tailark, and the corresponding theme folder is src/themes/default.

Take ShipAny Official Website as an example to demonstrate how to set up a theme folder to achieve custom theme effects.

First modify the configuration file to enable the custom theme

NEXT_PUBLIC_THEME = "shipany"

Create theme folder

In the src/themes folder, create a theme folder according to the configured custom theme name.

For example, the theme folder to be created here is src/themes/shipany

Implement theme content

Refer to the theme file content of the src/themes/default folder to implement custom theme file content.

When accessing the project page route, the corresponding page file is loaded from the configured theme first. If the corresponding page file cannot be found in the configured theme, the default theme page file will be loaded.

Follow the file structure example of the custom theme shipany below.

When accessing /, /pricing, /showcases pages, the content of src/themes/shipany/pages/{landing,pricing,showcases}.tsx files is displayed.
When accessing /blog, /blog/xxx, /terms-of-service, /privacy-policy and other pages, because there is no corresponding page file in the custom theme folder, it falls back to display the content of src/themes/default/pages/{blog,blog-detail,page-detail}.tsx and other files.
When accessing /templates, /templates/xxx pages, there is no definition in the default theme system. You need to create the corresponding page route files first: src/app/[locale]/(landing)/templates/page.tsx and src/app/[locale]/(landing)/templates/[name]/page.tsx, and then introduce the theme page file for display.

Page route file src/app/[locale]/(landing)/templates/page.tsx content example:

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} />;
}

When accessing the /templates page, prioritize finding the page file from src/themes/shipany/pages. If not found, fall back to display the file with the same name under src/themes/default/pages.

Preview custom theme

Visit ShipAny Official Website to see the effect of the custom theme.

light mode:

dark mode:

Referring to the above custom theme process, you can choose any UI component library you like, customize your own project theme according to your business characteristics, and make your project more high-end and atmospheric.

Recommended popular component libraries:

Custom Theme

Set Theme Style

Set Appearance

Set Theme Folder

On this page