AgenCMS

Themes overview

A theme controls how your whole website looks: its colors, fonts, spacing, and corner roundness. This page explains what a theme is, which themes you get out of the box, and how to apply one.

What a theme is

A theme is a saved look-and-feel for one website. Every theme is built on a kit — a design system that decides how sections, buttons, and layouts are styled. agencms generates one theme per kit automatically, so you do not create themes from scratch. You pick one and then fine-tune it.

Each theme stores:

  • A palette of five colors: Primary, Secondary, Accent, Background, and Surface (with matching dark-mode values).
  • A font (and an optional separate RTL font).
  • Density and Radius scales, which control spacing and corner roundness.
  • Page defaults, such as the default template used for new pages.

Only one theme can be active per website at a time. The active theme is what your published site uses.

The kits you get

Two kits ship by default, and each has a ready-made theme:

  • Minimal — a clean, restrained look. Default palette leads with a warm amber primary on a soft background.
  • Bold — a high-impact look with stronger, punchier colors (red primary, orange accent).

The kit you choose changes how sections render across the whole site, not just the colors. Switching to a different kit re-maps your existing sections to that kit's styling automatically.

Opening your themes

  1. Go to your dashboard at /dashboard.
  2. Open the website you want to work on.
  3. In the website workspace, open Themes (/dashboard/websites/{website}/themes).

You will see a card for each theme. The active theme is outlined and marked with an Active badge; the others show Inactive. Each card previews the theme's palette and font.

Applying a theme

  1. On the Themes page, click the theme card you want.
  2. A details panel opens with a larger preview gallery, the full palette, and the theme's Font, Density, Radius, and RTL font.
  3. Click Apply theme.

The page reloads and the new theme becomes active. If a theme is already active, its button reads Currently applied and is disabled.

When you apply a theme that uses a different kit from your current one, agencms migrates your sections to the new kit so your pages keep working in the new style. Give the change a moment to finish.

Customizing a theme

You do not have to live with the defaults. From the theme details panel, click Edit theme settings to change:

  • Colors (light and dark mode)
  • Font and RTL font
  • Density and Radius scales
  • Default page template

You can also reach the editor directly at /dashboard/websites/{website}/themes/{theme}/edit.

Editing a theme changes only that theme, so you can tune Minimal and Bold independently and switch between them whenever you like.

What's next