Dynamically change $primary variable in angular material theme?

Question

Here is the case I am getting color from DB and need to set primary color into my angular website. I need to update following value in file src/assets/sass/components/_variables.demo.scss

$primary:                                           #CC2128; // Bootstrap variable
$primary-hover:                                     #008cb7; // Custom variable
$primary-light:                                     #E1F0FF; // Custom variable
$primary-inverse:                                   #FFFFFF; // Custom variable

I tried

:root{
--primary-color: #fffff
}

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

and changing --primary-color from my app component like

document.documentElement.style.setProperty('--primary-color', color-from-db);

I am getting error that var(--primary-color); is not a color

however this method is working fine for all custom styles under src/styles.scss path.

How can I do this if I am doing it wrong?

Wiedmann