Convert SASS variables into CSS Root Variables

Question

I want to do the following: I have a color switcher on my website, when the user clicks on a color I want to change the text color on my website to the clicked color with Javascript. In my JS code I want to achieve this by modifiying the CSS root variable to the hex dataset of the clicked color.

**I want to highlight that I use grunt with the grunt-contrib-sass plugin.

This is how my color variables look in my _variables.scss file

// Main colors
$color-primary: #202326;
$color-primary-light: #1a1c1f;
$color-secondary: #26c3f6;
$color-secondary-light: #25c2f5;
$text-color-main: #999;
$light-gray: rgb(33, 37, 40);
$dark-gradient: linear-gradient(to top, #1a1b1f, #212528);
$link-color-background: #262626;
$link-color-hover: #1a1c1f;

I want these variables to show up in my main.css file to appear as a root variable. At this moment they get converted to the color of the variable.

Below an example:

.nav .sub-menu__link .sub-menu__anchor:hover {
          color: #26c3f6;
}

I want my main.css file to look something like this:

:root{ 
  --color-primary: #202326; 
}

.nav .sub-menu__link .sub-menu__anchor:hover {
          color: var(--color-primary);
}

Thank you very much!