How to change the colors

The theme main color can be changed from app/css/scss/_vars.scss

/* colors */
$templateColor: #535353;
$titleColor: #0a0a0a;
$titlegrey: #999999;
$hoverColor: #8c7332;;
$black: #000;
$iconblack: #323232;
$grey: #f5f5f5;
$label: #969696;
$blackish:#090909;
$white: #fff;
$navlink: #afafaf;
$cta: #939393;
$gray: #D6D6D6;
$almostwhite: #f9f9f9;
$dark: #0e0e0e;

In this file, you will be able to see the variable “$templateColor" which is used in all the site elements. If you will change this variable color code the theme color will be changed.

$templateColor: #535353;
$hoverColor: #8c7332; 

Also, you can integrate the theme color on your elements like in the following example:

.class {color: #{$templateColor};}

In  app/css/scss/_general.scss  several classes use the color variables:

body {
 font-size: 13px;
 line-height: 1.7;
 color: $templateColor;
 background-color: $grey;
}
.bg-color {
  background-color: $white;
  &--white {
   background-color: $white;
  }
  &--dark {
  background-color: $dark;
  }
  &--color {
  background-color: $hoverColor;
  }
}