How to Customise Canvas Template Colours With CSS Variables

Rebranding a Canvas site by hunting through thousands of lines of CSS for hex codes is slow and error-prone. Canvas exposes its core design decisions as CSS custom properties, so you can change a brand colour once and see it update across buttons, links, icons and accents.

How Canvas Theming Works

The Canvas HTML Template is built on Bootstrap 5 and bundles it, so you never load a Bootstrap CDN alongside it. Canvas then defines its own namespaced variables on top, all prefixed --cnvs-. That prefix matters. Variables such as --bs-primary or --color-primary do not drive Canvas components, so overriding them produces no visible result.

The variables you will use most often are:

Change the Theme Colour in Two Lines

The fastest win is redefining the theme colour. Add this after your style.css link in the document head, or in your own stylesheet that loads after it:

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/font-icons.css">

<style>
  :root {
    --cnvs-themecolor: #0f766e;
    --cnvs-themecolor-rgb: 15, 118, 110;
  }
</style>

Both lines matter. Canvas uses --cnvs-themecolor for solid fills and --cnvs-themecolor-rgb wherever it needs transparency: soft shadows, overlays and similar effects. Change only the hex value and those translucent effects keep the old colour. The mismatch is subtle, but clients notice it. Match the number format already used in your copy of style.css.

Colour choice is a design decision as much as a technical one. Check that white text on your chosen colour reaches a 4.5:1 contrast ratio, because Canvas places white text on theme-coloured buttons by default. Pale yellows and light greens usually fail that test.

Header and Menu Colours

Navigation is where brand colour is most visible. Canvas gives it dedicated variables so you can avoid fragile selector overrides:

:root {
  --cnvs-header-bg: #ffffff;
  --cnvs-header-sticky-bg: rgba(255, 255, 255, 0.96);
  --cnvs-primary-menu-color: #1f2937;
  --cnvs-primary-menu-hover-color: #0f766e;
}

A separate --cnvs-header-sticky-bg lets the header shift subtly on scroll, for example from transparent over a hero image to a solid white bar. Tying --cnvs-primary-menu-hover-color to your theme colour keeps hover states consistent with buttons and links elsewhere. If a header variable does not seem to apply, inspect the element in DevTools. Some demos set values at a more specific level, and in that case scope your override to #header instead of :root.

For the hero directly beneath the header, our guide to hero section designs that convert shows how colour choices affect click-through.

Typography and Logo Sizing

Colour is only part of a brand. Canvas handles fonts through --cnvs-primary-font and --cnvs-secondary-font, so swapping typefaces is a variable change rather than a hunt through heading selectors:

:root {
  --cnvs-primary-font: "Inter", sans-serif;
  --cnvs-secondary-font: "Playfair Display", serif;
  --cnvs-logo-height: 48px;
  --cnvs-logo-height-sticky: 36px;
}

Load the font files before referencing them (a Google Fonts link in the head works). For logo sizing, use --cnvs-logo-height and --cnvs-logo-height-sticky rather than writing rules that target the logo image directly. Canvas calculates header spacing from these values, so a direct image override can break vertical alignment of the menu. If you are converting design specs to relative units, the px to rem converter saves manual arithmetic.

Scoped Colour Overrides for Sections and Components

CSS variables cascade, so you can redefine them on any element and every Canvas component inside it follows. This is useful for a pricing section, a campaign banner or a partner-branded block:

.section-campaign {
  --cnvs-themecolor: #be123c;
  --cnvs-themecolor-rgb: 190, 18, 60;
}

<div class="section section-campaign">
  <div class="container">
    <h2>Limited Offer</h2>
    <a href="#" class="button button-large">Claim It</a>
  </div>
</div>

The button inside inherits the crimson theme colour while the rest of the page keeps the teal brand colour. This approach also works for multi-brand sites, event microsites and seasonal promotions. It is the same principle used in a conference website build, where individual tracks or sponsors need their own accent colour.

Common Mistakes and Honest Limitations

Variables are powerful, but they do not cover everything. Know the boundaries before promising a client a one-line rebrand:

1. Editing core files. Changing values directly in style.css works until you update the template, then your changes are overwritten. Keep overrides separate.
2. Forgetting the RGB twin. Updating --cnvs-themecolor without --cnvs-themecolor-rgb leaves old-coloured shadows and overlays.
3. Hard-coded colours. Some demo-specific styles and inline attributes use literal hex values. Search your page for the old brand hex after changing variables.
4. Wrong variable names. Using Bootstrap-style names will not affect Canvas components. Stick to the --cnvs- set.
5. Skipping contrast checks. A brand colour that looks great as a swatch can fail accessibility as a button background.

If you prefer to describe the change rather than code it, AI Edit Mode can apply colour and typography changes from a plain-language instruction, which is useful when iterating through several palettes with a client.

For teams producing many branded sites, Canvas Builder generates layouts that already follow these variable conventions, so a palette change stays a few lines of CSS instead of a manual cleanup.

If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.