Configuration

Learn how to configure and customize the Nebula theme.

Site Configuration

The main configuration file is astro.config.mjs. Here you can customize:

Basic Settings

export default defineConfig({
  site: 'https://your-domain.com',
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'id'],
  },
});

Integrations

Nebula comes with several integrations pre-configured:

  • @astrojs/tailwind - Styling
  • @astrojs/sitemap - SEO
  • @astrojs/react - Interactive components
  • @astrojs/mdx - Enhanced markdown

Theme Customization

Colors

Customize colors in src/styles/globals.css:

:root {
  --bg: 255 255 255;
  --fg: 17 24 39;
  --brand: 99 102 241;
}

.dark {
  --bg: 3 7 18;
  --fg: 248 250 252;
  --brand: 129 140 248;
}

Typography

Modify fonts in tailwind.config.mjs:

fontFamily: {
  sans: ['Inter', 'system-ui', 'sans-serif'],
  mono: ['JetBrains Mono', 'monospace'],
}

Environment Variables

Create a .env file for sensitive configuration:

PUBLIC_SITE_URL=https://your-domain.com
PUBLIC_GA_ID=G-XXXXXXXXXX

Next Steps