Customization

Theme Variables

All colors and styling are controlled through CSS variables in src/styles/global.css. These are updated automatically when you apply a recipe.

:root {
  /* Background colors */
  --bg-light: #fafafa;
  --bg-card: #ffffff;
  --bg-secondary: #f5f5f4;

  /* Text colors */
  --text-primary: #1c1917;
  --text-secondary: #57534e;

  /* Accent colors */
  --accent-primary: #1e3a5f;
  --accent-secondary: #f0f4f8;

  /* Border and shadows */
  --border-color: #e7e5e4;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

Dark Theme

Enable dark mode by setting isDark: true in site.ts. This adjusts the scrollbar colors and component styling for dark backgrounds.

// src/config/site.ts
export const siteConfig = {
  isDark: true,
  // ...
}

Dark theme CSS variables:

:root {
  --bg-light: #0a0a0a;
  --bg-card: #171717;
  --bg-secondary: #262626;
  --text-primary: #fafafa;
  --text-secondary: #a3a3a3;
  --border-color: #404040;
}

Typography

The template uses self-hosted fonts for performance. Replace font files in public/fonts/ and update the @font-face declarations in Layout.astro.

:root {
  --font-sans: 'Outfit', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
}

Current fonts:

• Outfit - Sans-serif for body text and UI
• Fraunces - Serif for headings and display text

Recipes can include Google Fonts links for alternative typography.

SubNav Group Colors

Customize the colored indicators for SubNav groups in global.css. Up to 6 groups are supported:

.sub-nav-group-primary::before {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.sub-nav-group-secondary::before {
  background: linear-gradient(135deg, #10b981, #059669);
}

.sub-nav-group-tertiary::before {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

/* ... and more */

Custom Scrollbar

The custom scrollbar automatically adapts to light/dark themes. Configure the thumb style in site.ts:

features: {
  customScrollbar: true,
  scrollbarThumbStyle: "full",  // "auto" or "full"
}

• auto - Thin thumb (8px) that expands on hover (Chrome-like)
• full - Always full width thumb (10px) for better visibility

The scrollbar colors adapt automatically to dark themes. Set customScrollbar: false to use native browser scrollbar.

Tailwind CSS

Tailwind CSS v4 is included by default. Use utility classes alongside the custom CSS:

<div class="flex items-center gap-4 p-6 bg-white rounded-lg">
  <h2 class="text-xl font-semibold">Title</h2>
  <p class="text-gray-600">Description</p>
</div>

Tailwind is optional and can be disabled in site.ts for smaller bundle size:

features: {
  tailwind: false,  // Disable Tailwind CSS
}

The template's core styles work without Tailwind - all components use custom CSS classes.

Adding Pages

Create new pages by adding .astro files to the src/pages/ directory. File-based routing automatically creates URLs:

• pages/index.astro → /
• pages/about.astro → /about/
• pages/blog/index.astro → /blog/
• pages/blog/[slug].astro → Dynamic routes

Creating Components

Add new components to src/components/. Use Astro components for static content or React components for interactivity:

<!-- Astro component (Card.astro) -->
---
const { title } = Astro.props;
---
<div class="card">
  <h3>{title}</h3>
  <slot />
</div>

<!-- React component with interactivity -->
<Counter client:load />

React components need a client directive for hydration:

• client:load - Hydrate on page load
• client:visible - Hydrate when visible
• client:idle - Hydrate when browser is idle

Logo Customization

The Logo component supports multiple styles. Configure in site.ts:

// Text-only logo
logoMark: "text-only",
logo: {
  src: "",
},

// Icon with text
logoMark: "icon-text",
logo: {
  emoji: "🚀",  // or src: "/logo.png"
},

// Gradient box with character
logoMark: "gradient-box",
logo: {
  char: "N",
},

// Custom SVG icon
logoMark: "icon-text",
logo: {
  svgIcon: `<svg viewBox="0 0 32 32">...</svg>`,
}