---
title: "Theme Gallery"
description: "Browse all 10 bundled seite themes with visual previews. Install community themes from URLs or generate your own custom theme with AI."
weight: 10
---

seite ships 10 production-ready themes compiled directly into the static site generator binary, no downloads, no dependencies, instant access.

## Bundled Themes

10 production-ready themes ship with every `seite` binary. Each is self-contained: includes SEO meta tags, search, pagination, language switcher, and accessibility features. Apply any theme instantly:

```bash
seite theme apply <name>
```

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; margin: 32px 0;">

<div style="border: 1px solid #e2e2e2; border-radius: 12px; overflow: hidden;">
<div style="padding: 24px 20px 16px; background: #ffffff; font-family: system-ui, -apple-system, sans-serif; min-height: 140px;">
<div style="font-size: 11px; color: #0057b7; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 8px;">DEFAULT</div>
<div style="font-size: 18px; font-weight: 700; color: #111; margin-bottom: 6px;">Clean Readable Baseline</div>
<div style="font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 12px;">720px centered column, system-ui font stack, blue links. The sensible starting point for any site.</div>
<div style="display: flex; gap: 6px;">
<span style="width: 20px; height: 20px; border-radius: 50%; background: #ffffff; border: 1px solid #ddd; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #111111; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #0057b7; display: inline-block;"></span>
</div>
</div>
<div style="padding: 10px 20px; background: #f8f8f8; border-top: 1px solid #e2e2e2; font-size: 13px; font-family: monospace; color: #555;">seite theme apply default</div>
</div>

<div style="border: 1px solid #e2e2e2; border-radius: 12px; overflow: hidden;">
<div style="padding: 24px 20px 16px; background: #faf9f6; font-family: Georgia, 'Times New Roman', serif; min-height: 140px;">
<div style="font-size: 11px; color: #888; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 8px; font-family: system-ui, sans-serif;">MINIMAL</div>
<div style="font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px;">Typography First</div>
<div style="font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 12px;">600px column, Georgia serif, understated search. Literary feel that lets content breathe.</div>
<div style="display: flex; gap: 6px;">
<span style="width: 20px; height: 20px; border-radius: 50%; background: #faf9f6; border: 1px solid #ddd; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #1a1a1a; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #888888; display: inline-block;"></span>
</div>
</div>
<div style="padding: 10px 20px; background: #f0eeeb; border-top: 1px solid #e2e2e2; font-size: 13px; font-family: monospace; color: #555;">seite theme apply minimal</div>
</div>

<div style="border: 1px solid #333; border-radius: 12px; overflow: hidden;">
<div style="padding: 24px 20px 16px; background: #0a0a0a; min-height: 140px;">
<div style="font-size: 11px; color: #8b5cf6; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 8px; font-family: system-ui, sans-serif;">DARK</div>
<div style="font-size: 18px; font-weight: 700; color: #e8e8e8; margin-bottom: 6px; font-family: system-ui, sans-serif;">True Black + Violet</div>
<div style="font-size: 13px; color: #999; line-height: 1.5; margin-bottom: 12px; font-family: system-ui, sans-serif;">True black background, violet accent, styled focus rings. Easy on the eyes, day or night.</div>
<div style="display: flex; gap: 6px;">
<span style="width: 20px; height: 20px; border-radius: 50%; background: #0a0a0a; border: 1px solid #333; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #e8e8e8; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #8b5cf6; display: inline-block;"></span>
</div>
</div>
<div style="padding: 10px 20px; background: #111; border-top: 1px solid #333; font-size: 13px; font-family: monospace; color: #999;">seite theme apply dark</div>
</div>

<div style="border: 1px solid #d0d7de; border-radius: 12px; overflow: hidden;">
<div style="padding: 24px 20px 16px; background: #ffffff; font-family: system-ui, -apple-system, sans-serif; min-height: 140px;">
<div style="font-size: 11px; color: #0969da; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 8px;">DOCS</div>
<div style="font-size: 18px; font-weight: 700; color: #1f2328; margin-bottom: 6px;">Sidebar Documentation</div>
<div style="font-size: 13px; color: #656d76; line-height: 1.5; margin-bottom: 12px;">Fixed 260px sidebar with auto-scrolling nav. GitHub-style colors. Built for technical docs.</div>
<div style="display: flex; gap: 6px;">
<span style="width: 20px; height: 20px; border-radius: 50%; background: #ffffff; border: 1px solid #ddd; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #1f2328; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #0969da; display: inline-block;"></span>
</div>
</div>
<div style="padding: 10px 20px; background: #f6f8fa; border-top: 1px solid #d0d7de; font-size: 13px; font-family: monospace; color: #656d76;">seite theme apply docs</div>
</div>

<div style="border: 3px solid #000000; overflow: hidden;">
<div style="padding: 24px 20px 16px; background: #fffef0; font-family: system-ui, -apple-system, sans-serif; min-height: 140px;">
<div style="font-size: 11px; color: #000; font-weight: 900; letter-spacing: 0.5px; margin-bottom: 8px;">BRUTALIST</div>
<div style="font-size: 18px; font-weight: 900; color: #000; margin-bottom: 6px;">Hard Edges, Bold Type</div>
<div style="font-size: 13px; color: #333; line-height: 1.5; margin-bottom: 12px;">Cream background, 3px borders, hard shadows, yellow accent. Zero border-radius. Maximum impact.</div>
<div style="display: flex; gap: 6px;">
<span style="width: 20px; height: 20px; background: #fffef0; border: 2px solid #000; display: inline-block;"></span>
<span style="width: 20px; height: 20px; background: #000000; display: inline-block;"></span>
<span style="width: 20px; height: 20px; background: #ffe600; border: 2px solid #000; display: inline-block;"></span>
</div>
</div>
<div style="padding: 10px 20px; background: #ffe600; border-top: 3px solid #000; font-size: 13px; font-family: monospace; color: #000; font-weight: 700;">seite theme apply brutalist</div>
</div>

<div style="border: 1px solid #e8e4df; border-radius: 20px; overflow: hidden;">
<div style="padding: 24px 20px 16px; background: #f4f0eb; font-family: system-ui, -apple-system, sans-serif; min-height: 140px;">
<div style="font-size: 11px; color: #5046e5; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 8px;">BENTO</div>
<div style="font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px;">Card Grid Layout</div>
<div style="font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 12px;">CSS grid, mixed card sizes, rounded corners, soft shadows. Dark and indigo accent cards for rhythm.</div>
<div style="display: flex; gap: 6px;">
<span style="width: 20px; height: 20px; border-radius: 50%; background: #f4f0eb; border: 1px solid #ddd; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #1a1a1a; display: inline-block;"></span>
<span style="width: 20px; height: 20px; border-radius: 50%; background: #5046e5; display: inline-block;"></span>
</div>
</div>
<div style="padding: 10px 20px; background: #e8e4df; border-top: 1px solid #ddd; font-size: 13px; font-family: monospace; color: #555; border-radius: 0 0 20px 20px;">seite theme apply bento</div>
</div>

</div>

{{% callout(type="tip") %}}
In the dev server REPL, type `theme dark` to instantly preview any theme with live reload, no restart needed.
{{% end %}}

## Install Community Themes

Download and install themes shared by others:

```bash
# Install from a URL
seite theme install https://example.com/themes/aurora.tera

# Install with a custom name
seite theme install https://example.com/themes/aurora.tera --name my-aurora
```

Installed themes are saved to `templates/themes/<name>.tera` and appear in `seite theme list`. Apply them like any bundled theme:

```bash
seite theme apply aurora
```

## Export & Share Your Theme

Package your current theme for others to install:

```bash
# Export with a description
seite theme export my-theme --description "Dark theme with green accents"

# The theme is saved to templates/themes/my-theme.tera
```

Host the `.tera` file anywhere (GitHub, your own server, a Gist) and others can install it with `seite theme install <url>`.

## Generate Custom Themes with AI

Instead of browsing themes, describe what you want and let AI build it:

```bash
seite theme create "minimal dark theme with cyan accents and generous whitespace"
seite theme create "warm editorial design with serif headings and earth tones"
seite theme create "neon cyberpunk with scanline effects and monospace everything"
```

This spawns Claude Code to generate a complete `templates/base.html` with all required blocks, SEO tags, search, pagination, and accessibility features. Requires [Claude Code](https://docs.anthropic.com/en/docs/claude-code) installed.

{{% callout(type="info") %}}
AI-generated themes are production-ready. Claude includes all SEO meta tags, search functionality, pagination, accessibility features, and responsive design automatically.
{{% end %}}

After generating, export it to share:

```bash
seite theme export cyberpunk --description "Neon cyberpunk with scanlines"
# Share templates/themes/cyberpunk.tera with anyone
```

## Theme Anatomy

Every theme (bundled or installed) is a single Tera template file that serves as `base.html`. A valid theme must include:

- **HTML structure**: `<!DOCTYPE html>` through `</html>`
- **SEO meta tags**: canonical URL, Open Graph, Twitter Card, JSON-LD
- **Template blocks**: `title`, `head`, `extra_css`, `header`, `content`, `footer`, `extra_js`
- **Search**: search input + client-side JavaScript using `search-index.json`
- **Pagination**: navigation when pagination context exists
- **Language switcher**: hreflang links + switcher UI for multilingual sites
- **Accessibility**: skip-to-main link, ARIA labels, focus rings, `prefers-reduced-motion`

All inline CSS (no external stylesheets) so the theme is completely self-contained.

## Managing Themes

```bash
seite theme list              # Show all bundled + installed themes
seite theme apply <name>      # Apply a theme (writes templates/base.html)
seite theme install <url>     # Download a theme from a URL
seite theme export <name>     # Export current theme as shareable .tera file
seite theme create "<prompt>" # Generate a custom theme with AI
```

In the dev server REPL, type `theme` to list themes or `theme <name>` to apply and auto-rebuild.

## Next Steps

- [Building Custom Themes](/docs/custom-themes): step-by-step guide to creating a theme from scratch
- [Templates & Themes](/docs/templates): customize theme blocks, override templates, and use data files
- [AI Agent](/docs/agent): use Claude for content creation, site management, and more
