Themes are complete design packages. Use one as-is, customize it, or build your own.
Theme Resolution
Your files always win. Override only what you need.
Choose Your Approach
Effort: None
Works out of the box. Set colors via CSS variables.
Effort: Low-Medium
Override specific templates. No forking required.
Effort: High
Full control. Start from scratch or fork existing.
Bundled Themes
| Theme | Use when |
|---|---|
default |
You want Bengal's built-in documentation theme with no extra packages. |
chirpui |
You want a site rendered with Chirp UI components and can installchirp-uiin the build environment. |
Theme authors can package reusable component systems with theme library asset contracts. Bengal will load the package templates, emit the declared CSS/JS in both dev and static builds, and warn or fail when rendered HTML references missing local assets.
Quick Reference
# bengal.toml
[theme]
name = "default"
/* static/css/custom.css */
:root {
--color-primary: #3b82f6;
--color-background: #0f172a;
--font-family-base: "Inter", sans-serif;
}
Include in your template:
<link rel="stylesheet" href="{{ asset_url('css/custom.css') }}">
Or store the path in [theme.config]and reference it:
[theme.config]
custom_css = ["css/custom.css"]
Then in your template:
{% for css_file in theme.config.custom_css %}
<link rel="stylesheet" href="{{ asset_url(css_file) }}">
{% end %}
your-project/
└── templates/
└── partials/
└── header.html # Your version wins
Use bengal theme swizzle partials/header.html (or bengal utils theme swizzle) to copy the original, then modify as needed.
Theme Contents
| Directory | Purpose |
|---|---|
templates/ |
HTML templates (Kida) |
static/ |
CSS, JS, images |
assets/ |
Processed assets |
theme.toml |
Theme configuration |
Tip
Start minimal: Override CSS variables first. Only copy templates when you need structural changes. The less you override, the easier upgrades will be.