astro tailwind css theme

How to customize AstroWind template to suit your branding

Personalize AstroWind template for your brand. Our guide unlocks seamless customization steps for a unique online presence.
How to customize AstroWind template to suit your branding

Customizing the AstroWind template is straightforward and allows you to create a unique online presence that perfectly matches your brand identity.

Color System

AstroWind uses CSS custom properties for theming, making it easy to customize every aspect of your site’s appearance. All colors are defined in the global stylesheet.

Changing Brand Colors

Update the primary, secondary, and accent colors to match your brand:

  • Primary colors for main interactive elements
  • Secondary colors for supporting elements
  • Accent colors for highlights and emphasis

Typography

The default font stack uses system fonts for optimal performance. To use a custom font:

  1. Add the font import to your layout
  2. Update the font family variable
  3. Adjust font weights as needed

Dark Mode

Dark mode is fully supported and respects user system preferences. You can also allow manual toggling between light and dark themes.

Layout Customization

The template offers multiple layout possibilities:

  • Full-width layouts for landing pages
  • Contained layouts for content-heavy pages
  • Sidebar layouts for documentation

Component Styling

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

Best Practices

  • Keep your color palette consistent across all pages
  • Test your customizations in both light and dark modes
  • Ensure sufficient contrast ratios for accessibility
  • Use the built-in responsive breakpoints for consistent layouts