Color Schemes

You can change your Website’s Color Scheme in an instant. You simply need to set the your Color Code in the css/custom.css file using the following code:

Code Example

:root {
	--cnvs-themecolor: #83b341;
	--cnvs-themecolor-rgb: 131, 179, 65;
}

Setting the --cnvs-themecolor-rgb is mandatory as some Elements uses this variable. Simply covert your HEX/RGB Colors here.

Dark Scheme

You can also completely change the Contrast of the Website to Dark, simply by adding the .dark Class to the body Tag. You can also add the .dark Class to certain elements like #header, .primary-menu, .section, Slides, #footer & many other elements. This will help you experimenting with different color schemes. The .dark Class will also be very helpful for changing the Contrast of the Text Colors of a Darker Custom Color Section.

<div class="section dark">
	...
</div>

Adaptive Color Scheme

Canvas now has the ability to enable Adaptive Color Scheme for your Website’s Visitors according to their System’s Color Mode. If your Visitors System’s Color Mode is Light, then Canvas will display the Light Color Scheme for your Website and if their System’s Color Scheme is Dark, Canvas will automatically detect it and turn your Website into Dark Color Scheme. To Enable use the following code:

<body class="stretched adaptive-color-scheme">

Last Modified: March 10, 2023

Need Help?