Edit 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. Uncomment the color variables

    Inside user-variables.scss under the Color scheme section you'll see the color variables have been commented out. Uncomment these variables by removing the two '//' characters before the variable name.

    $primary: #000;
$primary-2: #000;
$primary-3: #000;
  3. Change variable values

    By default, the values are set to #000. Change these values to your own color scheme hex values.

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

Editing other color schemes

The best way to see your color schemes appearing in demo pages other than index.html is to edit the HTML page to reference theme.css instead of its custom color scheme css file.

Search the file for .css and replace the main css file (Eg. theme-saas-trend.css) with theme.css. The page will then take on the colours specified in user-variables.scss. See above for editing colors in user-variables.scss.

Demo pages other than index.html may reference another color scheme. To save time, the gulp process does not rebuild these color schemes by default. To include another color scheme in the build process you may edit the gulpfile.

Search gulpfile.js for themeScss: and you should find this line:

themeScss: ['scss/theme.scss', '!scss/user.scss', '!scss/user-variables.scss'],

Add another color scheme to the array and it will be built when SCSS changes are saved.

Eg. to add theme-saas-trend.scss to the array:

themeScss: ['scss/theme-saas-trend.scss', 'scss/theme.scss', '!scss/user.scss', '!scss/user-variables.scss'],