Customizing Your Theme

The marketing site template uses CSS custom properties for theming, making it easy to customize every aspect of your site’s appearance.

Color System

All colors are defined in src/styles/global.css using CSS custom properties:

:root {
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-accent: #f59e0b;
  --color-background: #ffffff;
  --color-foreground: #0f172a;
}

Simply change these values to match your brand colors.

Dark Mode

Dark mode colors are defined under the .dark selector. The template automatically respects user system preferences and allows manual toggling.

Typography

The default font stack uses system fonts for optimal performance. To use a custom font, update the --font-family variable and add the font import to your layout.

Components

Every component uses these CSS variables, so changing a color in one place updates it everywhere. No need to hunt through individual component files.