I created a list for all darken and lighten colors that want to use in my project with the help of sass functions and lists. Here is the code of _functions.scss file:
_functions.scss:
@use "sass:list";
@use "sass:color";
@use "sass:string";
@use "sass:map";
@function themeAllGenerate($themeVar, $changeProp, $per) {
$returnedTheme: ();
@for $counter from 1 through list.length($themeVar) {
$currentColor: list.nth($themeVar, $counter);
@if ($changeProp == "lightness") {
$returnedTheme: list.append($returnedTheme, color.scale($currentColor, $lightness: $per), $separator: comma);
} @else if ($changeProp == "blackness") {
$returnedTheme: list.append($returnedTheme, color.scale($currentColor, $blackness: $per), $separator: comma);
} @else {
@error "Unknown change props #{$changeProp}!";
}
}
@return $returnedTheme;
}
@function lightDark($themVarConfig, $baseTheme) {
@each $name, $value in $themVarConfig {
$black-light: "";
$degree: 17%;
@if string.index($name, "lighten") {
$black-light: "lightness";
} @else {
$black-light: "blackness";
}
@if string.index($name, "2") {
$degree: 49%;
}
$newValue: themeAllGenerate($baseTheme, $black-light, $degree);
$themVarConfig: map.set($themVarConfig, $name, $newValue);
}
@return $themVarConfig;
}
Also here is the code of my _variables.scss file that finally makes the $listThemes variable that contains colors:
_variables.scss:
/* this file is responsible for variables that are used in this project */
@use "functions";
@use "sass:string";
@use "sass:list";
/* color-variables */
/* ----------------------------------- */
/* theme-1 */
/* ----------------------------------- */
$primary-color1: rgb(48, 146, 196);
$secondary-color1: rgb(132, 156, 224);
$text-color1: rgb(201, 249, 136); // this color must have a good contrast with "$back-ground1" color
$background-color1: rgb(3, 58, 32);
$info-color1: rgb(103, 14, 181);
$theme1: ($primary-color1, $secondary-color1, $text-color1, $background-color1, $info-color1);
/* theme-2 */
/* ----------------------------------- */
$primary-color2: rgb(23, 197, 200);
$secondary-color2: rgb(251, 38, 66);
$text-color2: rgb(3, 58, 32); // this color must have a good contrast with "$back-ground1" color
$background-color2: rgb(191, 243, 215);
$info-color2: rgb(99, 4, 56);
$theme2: ($primary-color2, $secondary-color2, $text-color2, $background-color2, $info-color2);
/* building lightness and darkness of colors */
/* ----------------------------------- */
$theme-config-1: ("theme1-lighten-1": null, "theme1-lighten-2": null, "theme1-darken-1": null, "theme1-darken-2": null);
$theme-config-2: ("theme2-lighten-1": null, "theme2-lighten-2": null, "theme2-darken-1": null, "theme2-darken-2": null);
$themes: ($theme1, $theme2);
$listThemes: ($theme-config-1, $theme-config-2);
@for $counterHere from 1 through list.length($listThemes) {
$outPutTheme: functions.lightDark(list.nth($listThemes, $counterHere), list.nth($themes, $counterHere));
$listThemes: list.set-nth($listThemes, $counterHere, $outPutTheme);
}
@debug $listThemes;
That works correctly and gives me the colors I want like below:
("theme1-lighten-1": (#4ea6d4, #99ade5, #d2fa9c, #078348, #8312e7), "theme1-lighten-2": (#92c9e4, #c0cdef, #e3fcc2, #25f492, #b36af3), "theme1-darken-1": (#307ca3, #8492ba, #b1cf88, #03301b, #570e96), "theme1-darken-2": (#305264, #7b7b7b, #838383, #031e11, #380e5c)), ("theme2-lighten-1": (#7ceef0, #fd909f, #25f492, #def9eb, #f737a0), "theme2-lighten-2": (#7ceef0, #fd909f, #25f492, #def9eb, #f737a0), "theme2-darken-1": (#176566, #802632, #031e11, #979797, #32041d), "theme2-darken-2": (#176566, #802632, #031e11, #979797, #32041d))
But the problem is that I want to set distinct variables for each color value inside list. For example a code like this one:
$counterLimit: list.length($theme-config-1);
$counterLimit1: list.length($theme1);
@for $counterFinal from 1 through list.length($listThemes) {
@for $counterFinal2 from 1 through $counterLimit {
@for $counterFinal3 from 1 through $counterLimit1 {
@debug list.nth(list.nth( list.nth( list.nth($listThemes, $counterFinal) , $counterFinal2 ) , 2), $counterFinal3);
/* the above @debug must be something like this:
-----------------------------------------------------
$variableDynamicName: list.nth(list.nth( list.nth( list.nth($listThemes, $counterFinal) , $counterFinal2 ) , 2), $counterFinal3);
-----------------------------------------------------
where "$variableDynamicName" must be set at each loop iteration to some values like "primary1-lighten1", "secondary1-lighten1", ... "info2-darken2".
*/
}
}
}
I don't know how to set variable name dynamically! I don't want that each time I need a color value in my style-sheets, I use a list or map function like list.nth(list.nth(... to obtain the value, I just want to call a variable name like:
h3 {
color: variables.$secondary1-darken1;
}
Is there any solution for that?