Navigation
Part 3

Configuration

Customize AstroGlass to match your brand.

AstroGlass is configured via files in src/config/ and standard CSS custom properties.

Configuration Files

  • src/
    • config/
      • themes.ts — Theme definitions (name, colors, sections, premium flag)
      • locales.ts — Supported languages and locale metadata
      • navigation.ts — Main site navigation structure
      • docs.ts — Documentation sidebar and version config

Styling with Tailwind CSS v4

This project uses Tailwind CSS v4 via the @tailwindcss/vite plugin. There is no tailwind.config.mjs file — all configuration is done through CSS.

Colors and theme variables are defined as CSS custom properties in src/styles/global.css and src/styles/_themes.css:

global.css
:root {
  --p: 260 80% 60%;   /* Primary (HSL) */
  --s: 310 80% 60%;   /* Secondary */
  --a: 190 90% 60%;   /* Accent */
  --b1: 220 20% 10%;  /* Base background */
  --bc: 220 20% 90%;  /* Base content (text) */
}
💡
Changing Colors

To change the site’s color scheme, update the HSL values in src/styles/global.css. Theme-specific overrides live in src/styles/_themes.css using [data-theme="..."] selectors.

Theme Configuration

Each theme is registered in src/config/themes.ts. This centralizes all theme metadata:

themes.ts
export const themes: ThemeDefinition[] = [
  {
    id: 'liquid',
    name: 'Liquid',
    color: 'from-blue-500 to-cyan-400',
    icon: '💧',
    sections: ['Header', 'Hero', 'About', 'Features', 'Portfolio', 'Pricing', 'Testimonial', 'FAQ', 'CTA', 'Contact', 'Footer'],
    enabled: true,
    premium: false,
    description: 'Fluid, organic design with smooth animations',
  },
  // ... 5 more themes (Glass, Neo, Luxury, Minimal, Aurora)
];

Locale Configuration

Languages are managed in src/config/locales.ts. To add a new language, add an entry and set enabled: true:

locales.ts
export const localesConfig: LocaleConfig[] = [
  { code: 'en', name: 'English', nativeName: 'English', flag: '🇬🇧', direction: 'ltr', enabled: true },
  { code: 'ru', name: 'Russian', nativeName: 'Русский', flag: '🇷🇺', direction: 'ltr', enabled: true },
];