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.

Adding a font

If you'd like to add a new font from Google Fonts, just add or replace the imported file from scss/leaf.scss. By default, we use this beautiful font:

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap');
Base font

Update the base font by changing the following variable in scss/leaf/_variables.scss:

$font-family-base: 'Poppins', sans-serif;

This font is used by the body tag and p, p, ol li, ul li.

Headers font

If you'd like to change the font family of the headers, update the following variable in scss/leaf/_variables.scss:

$font-family-headers: 'Poppins', sans-serif;

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