Theming - Bengal

Theming

Templates, assets, and visual customization

1 min read 269 words

Customize templates, CSS/JS assets, and theme packages — or skip entirely and use the default theme.

Note

Do I need this? Yes when changing layout, appearance, or template logic. Writers can skip this section — the default theme works out of the box. Start with Themer Quickstart, then Customize the Default Theme.

Customizing appearance? This section covers Kida templates, CSS/JS assets, and theme packages.

Key Terms (4)

CSS Custom Property: A CSS variable defined with-- prefix (e.g., --color-primary) that can be used throughout stylesheets. Bengal themes expose these for customization.
Theme Variable: A CSS custom property defined by Bengal themes for consistent styling. Override in your own CSS to customize appearance.
Color Token: A semantic color variable (e.g.,--color-text-primary) that abstracts actual color values. Enables consistent theming and dark mode support.
Spacing Token: A variable for consistent spacing (e.g.,--spacing-md). Uses a defined scale for uniform margins and padding across components.

Templating

Kida template engine, layouts, inheritance, and partials

Assets

CSS, JavaScript, images, and fonts

Themes

Use, customize, or create themes

Template Cookbook

Common templating patterns and Bengal-specific features

How Theming Works

flowchart TB subgraph Input A[Content Pages] B[Theme Templates] C[Assets CSS/JS] end subgraph "Template Engine" D[Select Layout] E[Render Templates] F[Process Assets] end subgraph Output G[HTML Pages] H[Optimized Assets] end A --> D B --> D D --> E C --> F E --> G F --> H

Customization Levels

Level	Effort	What You Can Change
CSS Variables	Low	Colors, fonts, spacing via`--var`overrides
Template Overrides	Medium	Copy and modify specific templates with swizzling
Custom Theme	High	Full control over all templates and assets

Tip

Quick wins: Start with CSS Variables to change colors and fonts without touching templates. Usebengal theme swizzle --template-path <template>to copy and customize specific templates when you need structural changes.

Reference

Reference	Description
Theme Variables	Complete`page`, `site`, `section`object reference
Template Functions	80+ filters and functions for templates
Kida Syntax	Kida template engine syntax reference (full docs)

In This Section

Templating Kida template engine, layouts, inheritance, and partials 5 pages

Assets CSS, JavaScript, images, and fonts 1 page

Themes Use, customize, or create themes 3 pages

Template Cookbook Common templating patterns and Bengal-specific features 15 pages

Create a Theme Build a custom Bengal theme from scaffold to deployment

What Bengal Provides vs What Your Theme Provides The capability-vs-presentation boundary — how template resolution falls back to the bundled default theme, and why directives render without a theme but shortcodes don't