Call SCSS function with dynamic values

I am working in Angular and use SCSS for my styles. I can declare a variable and reuse it later in SCSS like this:

$color-accent: #30bdff;
$color-accentLight: mix(white, $color-accent, 90%);


But what if the user want to change the 'color-accent' value? What if this value should be a dynamic value? Of course I can use the 'setProperty' function in my typescript file like this:

document.documentElement.style.setProperty('--dynamicValue', #30bdff);


And in the SCSS:

$color-accent: var(--dynamicValue);


Now if I want to directly use this value it will work. like this:

.mainContent{
Color: $color-accent
}


But my problem begins when I want to reuse this variable in a SCSS function like: min, max, darken, lighten...

Because this function need to have a color as their input and doesn't except a variable which contains a var(--) value.

I checked a lot, and I saw many similar questions, but could not find any answer of my problem.

Am I forced to not use any SCSS functions, if I want to get the value dynamically?

I tried to pass a variable into the SCSS function, or even search for a SCSS function which convert string into Color object, but could not find any

Continue reading...