Theme Customization
Canvas is built to be customized without ever touching the core files, so your changes survive every update. There are two levels of customization: quick tweaks with CSS custom properties (colors, fonts, spacing) and deeper changes by recompiling the SASS. Start with the lightweight approach below and only reach for SASS when you need structural changes.
1. Use css/custom.css for all your overrides
Canvas ships an empty css/custom.css that loads after style.css, so anything you put here wins. Never edit style.css directly: it gets overwritten every time you update Canvas.
<!-- Keep this order in every page's <head> -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="css/custom.css"><!-- your changes go here -->2. Change the theme color
Canvas exposes its accent color as a single CSS variable, --cnvs-themecolor (default is #1abc9c). Override it once in css/custom.css to re-skin every button, link, and highlight across the whole site:
/* css/custom.css */
:root {
--cnvs-themecolor: #6d28d9; /* your brand color */
--cnvs-themecolor-rgb: 109, 40, 217; /* same color as R, G, B */
}You can also scope a different accent color to a single section by setting the variable inline, exactly like the built-in demos do:
<section id="content" style="--cnvs-themecolor: #f59e0b;">
<!-- everything in here uses the orange accent -->
</section>3. Change the fonts
Canvas uses two font families out of the box: Inter for body text and Playfair Display for headings. Both are controlled by CSS variables, so swapping them is just two lines. First load your new font (for example from Google Fonts) in the <head>, then override the variables:
/* css/custom.css */
:root {
--cnvs-body-font: "Poppins", sans-serif; /* body + primary */
--cnvs-secondary-font: "Cormorant Garamond", serif; /* headings */
}See Changing Fonts for the full font list and Google Fonts loading tips.
4. Enable Dark Mode
Canvas has a complete dark scheme built in. Add the dark class to any element (usually <body>) to switch that region to dark, or let visitors toggle it themselves with the data-bodyclass-toggle attribute on a button:
<!-- Whole site starts in dark mode -->
<body class="stretched dark">
<!-- Or a switch users can click -->
<a href="#" data-bodyclass-toggle="dark">Toggle dark mode</a>Dark mode is driven by the same contrast variables (--cnvs-contrast-0 through --cnvs-contrast-1000), so your --cnvs-themecolor override carries over automatically. See Dark Mode for the full details.
5. Recompile the SASS for deeper changes
For structural changes (spacing scale, breakpoints, disabling components, editing shortcode styles) edit the SASS source in the sass/ folder and recompile. The main variables live in sass/_variables.scss:
// sass/_variables.scss
$theme-color: #6d28d9; // primary accent
$body-font: "Inter", sans-serif;
$secondary-font: "Playfair Display", serif;
$line-height-content: 1.65;After editing, run the Gulp build to regenerate style.css. The full toolchain (Node version, install, and the gulp scsscompile task) is covered in SCSS & Gulp.js.
Which approach should I use?
css/custom.cssfor colors, fonts, spacing overrides, and one-off fixes. Fastest, no build step, update-proof. Use this 90% of the time.- SASS recompile when you need to change variables that generate many rules (contrast palette, breakpoints), remove unused components to shrink
style.css, or edit shortcode styling at the source.
Tip: If you want a done-for-you starting point instead of styling from scratch, browse the Niche Demos, or try CanvasBuilder, our AI website builder that generates a fully themed, production-ready Bootstrap 5 site from a plain-English prompt.
Usage
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Here goes your custom.css
============================================= -->
<link rel="stylesheet" href="css/custom.css" type="text/css" />
</head>