Change Variable colors if else in scss - css

Question

I am trying to change color on click of change contrast (adding change-contrast class to body) in scss.
my static colors would be :
$primary-color-blue: #2aace2;
$mid-blue-color: #2695d2;
$dark-blue-color: #124b62;
on change contrast :
$primary-color-blue: #177eab;
$mid-blue-color: #1c6f9b;
$dark-blue-color: #124b62;
should be something like in sass
if(change-contrast) {
// console.log (get High Constrast Colors)
}
else {
// console.log (Static Colors)
}
Iam trying to do like below, but if i do like below i have to add to each and every class.
#mixin branding {
#each $brand in $brand_clr {
&.#{nth($brand,1)} {
$primary-color-blue: #177eab;
#content;
}
}
}
test {
background: $primary-color-blue;
#include branding {
background: $primary-color-blue;
}
}
Appreciate your help on this !!
Thanks

Answer 1

I think the solution comes across a well structured color map. You need to group colors by types (eg. static, contrasted). Then, use a mixin to avoid duplicating youself.
$colors:(
standard: (
primary-color-blue: #2aace2,
mid-blue-color:#2695d2,
dark-blue-color:#124b62
),
contrasted: (
primary-color-blue: #177eab,
mid-blue-color:#1c6f9b,
dark-blue-color:#124b62
)
);
#function get-color($key, $type: 'standard'){
#each $name, $color in map-get($colors, $type){
#if($key == $name){
#return $color
}
}
}
#mixin get-color($property,$color){
#{$property}: get-color($color);
#at-root body.contrasted & {
#{$property}: get-color($color, contrasted);
}
}
.className{
#include get-color(background-color, primary-color-blue)
}
This will output:
.className {
background-color: #2aace2;
}
body.contrasted .className {
background-color: #177eab;
}