Color Schemes

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:

Note:

Make sure you add the css/colors.css stylesheet in your Document <head> after the default stylesheets.

How to use

Link the Colors Stylesheet

<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>

Add your Colors

The Default HEX Color used is #1ABC9C. Simply open the css/colors.css File and replace this HEX Color with your own Colors.

Using Colors.php

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 css/colors.css Files.

<link rel="stylesheet" href="css/colors.php?color=2C3E50" type="text/css" />

Make sure that you do not use # in the URL for the HEX Colors.

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">