angular - SCSS dynamic theme with css variable

Question

I am trying to apply the theme dynamically using the CSS variable.

    $primary: #3da677;

    // Bootstrap
    $theme-colors: ("primary": $primary,
    );

Above is working fine but what I want is:

$theme-colors: ("primary": var(--primary),
        );

Above is throwing an error that says "$color: var(--primary) is not a color"

I am assigning value in the variable using below code:

document.documentElement.style.setProperty(--primary, "#ec782e");

Below is the root scss file:

:root {
  @each $name, $color in $theme {
    --#{$name}: #{$color};
  }
}

Please help!!

Answer 1

等待大神答复