Learn more about how you can change the color scheme for Spaces Bootstrap Directory Listing Template

Color scheme

We have already carefully selected the optimal color scheme for Spaces, but your business may need another color palette. Here’s how you can change the colors using Sass.

Go to the scss/spaces/_variables.scss file and search for the following variables:

$primary: #0d1b48;
$secondary: #C33C54;
$tertiary: #26408B;

Change the hex color for each variable to the color palette that you desire.

Complementary colors

Here’s a list of the complementary colors for alerts, cards and so on that you can change with the following variables:

$success:       $green;
$info:          $blue;
$warning:       $yellow;
$danger:        $red;
$gray:          $gray-900;
$light:         $gray-400;
$lighten:       $gray-100;
$soft:          $gray-300;
$dark:          $dark;

Body background

If you want to change the background color of the body, change the following variable:

$body-bg: $white;

Changing the color of the links can be updated with these variables:

$link-color:                $secondary;
$link-decoration:           none;
$link-hover-color:          darken($link-color, 10%);
$link-hover-decoration:     none;