User API

All themes authored using Astro Theme Provider share a basic API for using the theme.

Reference

config

This type for this property depends on the theme, typically themes will use an object

Example:

config: {
  title: 'My Blog',
  description: 'This is my theme',
  favicon: '/favicon.svg'
}

pages

An object used to configure the pages injected by a theme

Example:

pages: {
  '/': '/blog',   // Rename pattern
  '/404': false,  // Toggle page off
  '/[...slug]': '/blog/[...slug]',
},

overrides

An object used to override the virtual modules created by a theme

Example:

overrides: {
  components: {
    // Override exports from a virtual modules using an object
    Hero: './src/components/CustomHero.astro'
  },
  styles: [
    // Append imports to a virtual module using an array
    './src/styles/custom-styles.css',
  ],
}

integrations

An object used to disable/ignore integrations added by a theme

integrations: {
  "@astrojs/sitemap": false,
},

Example

Example for how a blog theme might be configured

Simple Customization

astro.config.mjs

import { defineConfig } from 'astro/config';
import BlogTheme from 'blog-theme';

export default defineConfig({
  integrations: [
    BlogTheme({
      config: {
        title: 'My Blog',
        description: 'This is my theme',
      },
    }),
  ]
});

Advanced Customization

astro.config.mjs

import { defineConfig } from 'astro/config';
import BlogTheme from 'blog-theme';

export default defineConfig({
  integrations: [
    BlogTheme({
      config: {
        title: 'My Blog',
        description: 'This is my theme',
        favicon: '/favicon.svg'
      },
      pages: {
        '/': '/blog',
        '/404': false,
        '/[...slug]': '/blog/[...slug]',
      },
      overrides: {
        components: {
          Card: './src/Card.astro',
          Pagination: './src/Pagination.astro',
        },
        styles: [
          "./src/global.css"
        ],
      },
      integrations: {
        "@astrojs/sitemap": false,
      },
    })
  ]
});