Change your Website’s Mode in a jiffy with Canvas. Simply adding the .dark Class is enough and will do all the work for you in the background. But what if you design a Custom Layout? Well, we have got it covered in Canvas by using the Contrast Utility Classes. So any Layout can now be a Dark Layout.
<body class="stretched dark">You can 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: April 12, 2023