# Theming

URL: /bengal/docs/build-sites/customize/
Section: customize
Tags: persona-themer

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

Design & Theming Customize templates, CSS/JS assets, and theme packages — or skip entirely and use the default theme. Note 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. Code Templating Kida template engine, layouts, inheritance, and partials Assets CSS, JavaScript, images, and fonts Palette 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 Tip Quick wins: Start with CSS Variables to change colors and fonts without touching templates. Use bengal 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)

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

Metadata:
- Author: lbliii
- Word Count: 333
- Reading Time: 2 minutes