astro-theme-provider

Author themes for Astro like a normal project and export your work as an integration for others to use

Documentation

Theme Template

Contributing

• Contributing Guide
• Discord Channel
• Discussions
• Issues

Example

Authoring a Theme:

package/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── index.ts
└── package.json

// package/index.ts
import defineTheme from 'astro-theme-provider';
import { z } from 'astro/zod'

export default defineTheme({
  schema: z.object({
    title: z.string(),
  })
})

Using a Theme:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import Blog from 'blog-theme';

export default defineConfig({
  integrations: [
    Blog({
      config: {
        title: "My Blog"
      },
      pages: {
        '/404': false, // Toggle routes off
        '/blog': '/projects', // Overwrite routes
      },
      overrides: {
        components: {
          Hero: './src/Custom.astro' // Overwrite theme assets
        },
        styles: [
          "./src/custom.css" // Add custom stylesheets
        ],
      },
    }),
  ],
});