AgenCMS

Customizing a theme

A theme controls how your site looks: its colors, fonts, spacing, and corner roundness. This page shows you how to open a theme and tune those values, with a live preview so you can see every change before you save.

Open the theme editor

  1. Go to your website workspace at /dashboard/websites/{website}/themes.
  2. Click a theme card to open its details.
  3. Click Edit to open the editor.

The details panel shows the theme's current Font, Density, Radius, and RTL font at a glance. The editor opens with two panels: the controls on the left, and a live preview on the right that updates as you type.

Edit typography

Under Typography you set the type families for your site. agencms loads them from Google Fonts.

  1. Use the Font picker to choose the main (left-to-right) font.
  2. Use the RTL font picker to choose a font for right-to-left languages such as Arabic. If you leave it empty, RTL text inherits your main font.

The preview panel on the right shows the active Primary font name and renders sample text in it.

Edit the light palette

Under Light palette you set the colors that drive your site's default appearance. Each color has a swatch you can click to open a color picker, plus a hex field you can type into directly.

  • Primary — headings, links, and primary buttons
  • Secondary — supporting text and surfaces
  • Accent — highlights, tags, and call-outs
  • Background — the page background surface
  • Surface — cards, headers, and elevated panels

Edit the dark palette

Under Dark palette you set the colors used when a visitor views your site in dark mode. Each dark color falls back to its matching light color until you change it. So if you only want a light theme, you can leave the dark palette alone and it will mirror the light palette automatically.

Set any dark color the same way as the light palette: click the swatch or type a hex value.

Preview your changes

The right side of the editor gives you two previews:

  • Live preview — an instant mockup of color and typography pairing.
  • Live home preview — a real screenshot of your home page rendered with the draft theme. It regenerates a short moment after you stop typing.

In the home preview header you can:

  1. Switch the preview language (if your site supports more than one locale).
  2. Toggle between a light and a dark capture using the sun and moon buttons.
  3. Click the refresh icon to regenerate the screenshot.

Set template defaults

Under Template defaults you choose the Default page template that new pages start from. This applies to new pages that don't pick their own template. Post types manage their own template defaults separately. See Templates for more.

Density and radius

Every theme also carries a Density and a Radius value, both shown as a percentage in the theme details panel and both defaulting to 100%.

  • Density controls overall spacing — lower values make layouts more compact, higher values more airy.
  • Radius controls corner roundness across components.

These values stay at their generated defaults unless changed, and they apply automatically to your rendered site.

Save your changes

When the preview looks right, click Save changes at the top of the editor. To leave without saving, click Cancel or Back to themes.

Saving updates the theme but does not change which theme is live. To make a theme the active one for your site, open it from the themes list and click Apply. See Themes overview for the full picture.