Dynamically add colors in $theme-colors in Scss Functions Angular

I'm trying to add dynamic color through javascript using variables and then trying to use scss functions for that color, but I am getting below errors

Module build failed(from. / node_modules / sass - loader / dist / cjs.js):
  SassError: $color2: var (--
    default -primary - color) is not a color.╷
106│ @return mix($color - base, $color, $level * $theme - color - interval);│ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ╵
node_modules\ bootstrap\ scss\ _functions.scss 106: 11 theme - color - level()
node_modules\ bootstrap\ scss\ _tables.scss 101: 38 @import
node_modules\ bootstrap\ scss\ bootstrap.scss 17: 9 @import
src\ styles.scss 38: 9 @import
src\ app\ locations\ containers\ locations\ locations.component.scss 1: 9 root stylesheet

Below is the approach I am using to add the color dynamically

document.documentElement.style.setProperty('--default-primary-color', "#dd9e9e");

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/mixins';

$primary-color: var(--default-primary-color);

$theme-colors: ( // "primary": #e4b5b1,
// "primary": #00b4b4,
'primary': var(--default-primary-color), 
);

.btn-secondary {
  background: theme-color("primary");
  border-color: theme-color("primary");
}

In the above code, I need to add the dynamic value to theme-colors

also if I add directly the $primary-color by not using the themes-color then it's working but I want to use theme-color

.primary-background {
  background-color: $primary-color; // works
}

the above approach will work .primary-background {
  background-color: theme-color("primary"); //-> doesn't work
}

I tried to find many approaches but didn't find any solution for them

Please help me as I m stuck here and not able to continue.

if this approach doesn't work please suggest any other approach using ngrx or any other method.

from Dynamically add colors in $theme-colors in Scss Functions Angular