How to edit color scheme

Changing Leaf's color scheme is incredibily easy. Because our Sass is heavily built on variables and mixins you can change the whole color scheme with only 3 lines.

Color scheme

Go to the scss/leaf/_variables.scss file and search for the following variables:


$primary:       #174f84;
$secondary:     #10ab7c;
$tertiary:      #FF7F66;

Change the hex color for each variable to the color palette that you desire.

Shades of grey

If you don't fancy our 11 shades of grey you can change them in scss/leaf/_variables.scss. Search for the following variables in the file:


$white:    #ffffff;
$gray-100: #f6f9fc;
$gray-200: #e9ecef;
$gray-300: #dde1ed;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #999999;   
$gray-700: #777777;   
$gray-800: #77838f;   
$gray-900: #3e4555;
$black:    #111111;
Error, success and info colors

We use Bootstrap's default variable naming conventions and we recommend changing them in scss/leaf/_variables.scss:

$success:       $green;
$info:          $teal;
$warning:       $yellow;
$danger:        $red;

Changing these variables will update the colors of all class modifiers that use *-success, *-danger (eg. .text-danger).

Dark, light, soft and gray

Search for the following variables in the scss/leaf/_variables.scss file: 

$gray:          $gray-500;
$light:         $gray-300;
$dark:          $gray-900;
$soft:          $gray-100;

Changing these variables will update the colors of all class modifiers that use *-light, *-dark (eg. .bg-light).