Color Schemes

Color Schemes

Canvas is built on CSS custom properties, so changing the accent color of your whole site is usually a one-line change. The main variable is --cnvs-themecolor.

The default theme color

In the :root block of style.css you will find:

:root {
    --cnvs-themecolor: #1abc9c;
    --cnvs-themecolor-rgb: 26, 188, 156;
}

--cnvs-themecolor is used directly for solid colors. --cnvs-themecolor-rgb holds the same color as raw RGB channels so it can be used inside rgba() for transparent variations. Whenever you change one, change the other to match.

Changing it site-wide

The cleanest place to override it is css/custom.css, which loads after style.css:

:root {
    --cnvs-themecolor: #4a75d6;
    --cnvs-themecolor-rgb: 74, 117, 214;
}

Because custom.css loads last, your value wins over the default without editing the compiled style.css. This also keeps your change safe when you update Canvas.

Scoping a color to one section

You can set the variable inline on any element to recolor just that part of the page. Everything inside inherits the new accent:

<div class="section" style="--cnvs-themecolor:#e74c3c; --cnvs-themecolor-rgb:231,76,60;">
    <!-- buttons, links and accents here use the red theme color -->
</div>

Using the RGB variant for transparency

The RGB variable is what makes soft tinted backgrounds possible. Canvas uses this pattern throughout, for example:

background-color: rgba(var(--cnvs-themecolor-rgb), 0.1);

You can reuse the same approach in your own CSS to create a light tint of your accent color.

Tips

• Always update both --cnvs-themecolor and --cnvs-themecolor-rgb together, or transparent elements will not match.
• Prefer custom.css over editing style.css directly so updates stay painless.
• For a permanent change baked into the compiled CSS, set $themecolor in sass/_variables.scss and rebuild.