Quiero hacer lo siguiente: tengo un selector de color en mi sitio web, cuando el usuario hace clic en un color, quiero cambiar el color del texto en mi sitio web al color en el que se hizo clic con Javascript. En mi código JS, quiero lograr esto modificando la variable raíz CSS al conjunto de datos hexadecimal del color en el que se hizo clic.

**Quiero resaltar que uso grunt con el complemento grunt-contrib-sass.

Así es como se ven mis variables de color en mi archivo _variables.scss

 // 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;

Quiero que estas variables aparezcan en mi archivo main.css como una variable raíz. En este momento se convierten al color de la variable.

A continuación un ejemplo:

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

Quiero que mi archivo main.css se vea así:

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

¡Muchos gracias!