Theming your site with CSS variables

Rebranding a site shouldn’t mean hunting for hex codes across dozens of files. This template uses design tokens and CSS variables so a handful of values control the entire look.

One source of truth

Brand colours live in a single place and are exposed as CSS variables — --color-primary, --color-secondary, --color-link, and friends. Components reference those variables instead of fixed colours.

Change once, update everywhere

Because every button, link, and highlight points at the same variable, changing your primary colour updates them all at once. No search-and-replace, no missed spots.

Edit it live

CloudCannon exposes the theme as editable fields, so you can preview a new colour scheme in real time before committing it. It’s a fast, low-risk way to try ideas.

Beyond colour

The same approach covers typography, spacing, and corner radii — the small decisions that add up to a site’s personality. Adjust the tokens and the whole UI shifts to match.