Learn more about how you can change the color scheme for Spaces Bootstrap Directory Listing Template
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.
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;
If you want to change the background color of the body, change the following variable:
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;