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:
:root {
--cnvs-themecolor: #83b341;
--cnvs-themecolor-rgb: 131, 179, 65;
}
--cnvs-themecolor-rgb
is mandatory as some Elements uses this variable. Simply covert your HEX/RGB Colors here.
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>
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