User API

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

Reference

config

The value/type for this property is defined by a theme’s schema. This configuration can be used by a user to customize the theme.

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

pages

An object that can be used to configure the pages that are injected by a theme. Users can use this configuration to disable or rename pages.

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

overrides

An object that can be used to override the virtual modules that are created by a theme. Users can use this configuration to append custom styles or replace components and assets inside of a theme.

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 that can be used to disable integrations that are injected by a theme.

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

Examples

Examples for what a theme might look like inside of a user’s Astro config.

Simple customization

astro.config.mjs

import { defineConfig } from 'astro/config';
import myTheme from 'my-theme';

export default defineConfig({
  integrations: [
    myTheme({
      config: {
        title: 'My Theme',
        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,
      },
    })
  ]
});