Customize Theme

ShipNowKit uses shadcn/ui and next-themes to support theme switching. You can use any shadcn theme generator to customize colors and typography for a more personalized site.

Set Theme Styles

Generate a theme with tweakcn

We recommend tweakcn as the theme generator.

1. In the tweakcn editor, pick a theme you like (switch previews in the top-left).
2. Click Code in the top-right to open Theme Code.
3. In Theme Code, choose Tailwind v4 + oklch, then click Copy.
4. Paste the code into styles/theme.css in your project, replacing the default styles.
5. Reload your preview to see the new look.

Theme file structure

Theme variables live in styles/theme.css:

:root {
  --background: oklch(0.9821 0 0);
  --foreground: oklch(0.2435 0 0);
  --primary: oklch(0.4341 0.0392 41.9938);
  /* ... more variables ... */
}

.dark {
  --background: oklch(0.1776 0 0);
  --foreground: oklch(0.9491 0 0);
  --primary: oklch(0.9247 0.0524 66.1732);
  /* ... more variables ... */
}

Color format

ShipNowKit uses oklch, a modern CSS color space with:

• Better perceptual uniformity
• More intuitive tuning
• Wider gamut support

If you have HSL colors, convert them to oklch with an online tool.

Set Appearance Mode

defaultNextTheme in config/site.ts controls the default appearance.

Default appearance

const baseSiteConfig: BaseSiteConfig = {
  // ...
  defaultNextTheme: 'system', // 'light' | 'dark' | 'system'
}

Default is system, which follows the user’s OS theme (light/dark).

Change the default

To default to dark mode, change:

const baseSiteConfig: BaseSiteConfig = {
  // ...
  defaultNextTheme: 'dark',
}

Then first-time visitors will see dark mode by default.

Appearance options

• light: Light mode
• dark: Dark mode
• system: Follow system setting (default)

Users can switch modes via the theme toggle in the UI.