Переменные CSS в функции затемнения и освещения

Мне нужно динамически менять цвета с помощью кнопки. Сначала я объявляю переменную css, а затем объявляю переменную scss для переменной css. Это прекрасно работает. Но когда я пытаюсь установить функцию scss затемнения или освещения, она выдает ошибку, поскольку это не цвет.

Мне нужно знать, как поступить.

В переменной.scss

:root{
  --primary_color:rgba(0, 0, 0, 1);
  --secondary_color:#ffffff;
}

/* Only use  #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color(). Mui not support other farmates */
$primary_color:  var(--primary_color);
$secondary_color: var(--secondary_color);

когда я пытаюсь создать новый доступный файл как $list_button_hover:hover_color($hover);

@function hover_color($color){
    @if (lightness($color) < 50%){
        @return lighten($color,30%);
    }@else{
        @return darken($color,10%);
    }
}

Выдает ошибку как

ERROR in ./src/Components/Sidnavbar/Sidnavbar.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/Components/Sidnavbar/Sidnavbar.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
4 │ $list_button_hover:hover_color($hover);
  │                                ^^^^^^
  ╵
  src/Components/Sidnavbar/Sidnavbar.scss 4:32  root stylesheet

webpack compiled with 1 error and 1 warning

Мне нужно динамически изменить цвет с помощью

    const root = document.documentElement;
root.style.setProperty("--primary_color", "#fff");

🤔 А знаете ли вы, что...
С помощью CSS можно управлять цветами, шрифтами, отступами, и многими другими аспектами дизайна.