Edit the Color Scheme

Using SCSS you can easily transform the color scheme of your site.


Editing the default color scheme variables

Editing the default color scheme variables will change the colors in theme.css. See below for changing colors in other color schemes.

  1. Open the user-variables.scss file

    The user-variables.scss file is located in the /scss/ directory of the theme package.

  2. Change variable values

    Inside user-variables.scss under the Color scheme section you'll see the color variables. Modify the HEX values to change the color scheme.

    $primary: #009B72;
    $primary-2: #FF564F;
    $primary-3: #051B35;

Do not modify or remove the map declarations that follow the color variables. These are required for correct compilation of the CSS files.