Good Vibrations

Colors

Overview

The theme's colors are editable through the styles.scss file. There is a list of Sass variables with the color scheme. To change colors modify the variable value. Check out this YouTube video that shows how to change a color.

                            
$brand-primary: #FF3B90;
$brand-mid-primary: lighten($brand-primary, 20%);
$brand-primary-adjusted: adjust-color($brand-primary, $hue: 26.02deg, $saturation: 100%, $lightness: 23.57%);
$brand-light-primary: lighten($brand-primary, 33.5%);
$brand-dark-gray: #4E4E4E;
$brand-mid-gray: #818181;
$brand-light-gray: #CCCCCC;
$brand-x-light-gray: #F2F2F2;
$brand-warning: #E3AA00;
$brand-success: #21B780;
$brand-danger: #E25D6A;

Brand Primary

$brand-primary: #FF3B90;

Brand Mid-Primary

$brand-mid-primary: lighten($brand-primary, 20%);

Brand Primary Adjusted

$brand-primary-adjusted: adjust-color($brand-primary, $hue: 26.02deg, $saturation: 100%, $lightness: 23.57%);

Brand Light Primary

$brand-light-primary: lighten($brand-primary, 33.5%);

Brand Dark Gray

$brand-dark-gray: #4E4E4E;

Brand Mid Gray

$brand-mid-gray: #818181;

Brand Light Gray

$brand-light-gray: #CCCCCC;

Brand Extra-Light Gray

$brand-x-light-gray: #F2F2F2;

Brand Warning

$brand-warning: #E3AA00;

Brand Success

$brand-success: #21B780;

Brand Danger

$brand-danger: #E25D6A;