Themes - Bengal

Themes are complete design packages. Use one as-is, customize it, or build your own.

Theme Resolution

flowchart TB A[Request: header.html] B{Your templates/?} C{Theme templates/?} D{Bengal default?} E[Use your file] F[Use theme file] G[Use default file] A --> B B -->|Found| E B -->|Not found| C C -->|Found| F C -->|Not found| D D --> G

Your files always win. Override only what you need.

Choose Your Approach

🎨 Use Default

Effort: None

Works out of the box. Set colors via CSS variables.

✏️ Customize

Effort: Low-Medium

Override specific templates. No forking required.

🏗️ Create New

Effort: High

Full control. Start from scratch or fork existing.

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.