The next part of our theme is creating a color scheme. We'll use two to three main colors which we'll place in variables. We'll then create a
$theme map which we will use throughout our colors Sass file. This will allow us to easily switch themes by simply modifying our
$theme map in future.
Let's first add a file called _color.scss in the scss/theme directory. Inside that we'll start to add our variables:
$red: hsl(0, 57%, 60%) !default; $dark-grey: hsl(0, 3%, 22%) !default; $theme: ( color: ( primary: $red, secondary: $dark-grey ) ) !default;
You should also place them at the beginning of the scss/style.scss file as we've been doing with all of our variables so far:
// scss/style.scss $red: hsl(0, 57%, 60%); $dark-grey: hsl(0, 3%, ...