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