# Themes

URL: /docs/theming/themes/
Section: themes

--------------------------------------------------------------------------------

Working with Themes 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 Use a Theme CSS Variables Override Template 1 2 3# bengal.toml [theme] name = "default" 1 2 3 4 5 6/* static/css/custom.css */ :root { --color-primary: #3b82f6; --color-background: #0f172a; --font-family-base: "Inter", sans-serif; } Include in your config: 1 2[theme.config] custom_css = ["css/custom.css"] your-project/ └── templates/ └── partials/ └── header.html # Your version wins Copy the original from themes/default/templates/, modify as needed. Theme Contents Directory Purpose templates/ HTML templates (Jinja2) static/ CSS, JS, images assets/ Processed assets theme.toml Theme configuration Tip Tip Start minimal: Override CSS variables first. Only copy templates when you need structural changes. The less you override, the easier upgrades will be.

--------------------------------------------------------------------------------

Metadata:
- Author: lbliii
- Word Count: 214
- Reading Time: 1 minutes