You can change your Website’s Color Scheme in an instant. You simply need to change the HEX Color Code in the
css/colors.css file & you are good to go. Follow these quick steps to get going:
Make sure you add the
css/colors.css stylesheet in your Document
<head> after the default stylesheets.
<head> ... <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Here goes your colors.css ============================================= --> <link rel="stylesheet" href="css/colors.css" type="text/css" /> ... </head>
The Default HEX Color used is
#1ABC9C. Simply open the
css/colors.css File and replace this HEX Color with your own Colors.
You can also dynamically change the Colors by using the
css/colors.php File by setting the
color URL Parameter. This way you change the Color Schemes of different files without creating multiple
<link rel="stylesheet" href="css/colors.php?color=2C3E50" type="text/css" />
#in the URL for the HEX Colors.
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: June 21, 2020