I am using the scss varables and use it all files. Now I need to change those colors dynamically by js file. I am confused with this concept.

app.js

import "./App.scss";
import Sidnavbar from "./Components/Sidnavbar/Sidnavbar";
import { ThemeProvider, createTheme } from "@mui/material";
import palette from "./Scss/Variables.module.scss";


function App() {
  const theme = createTheme({
    palette: {
      primary: {
        main: palette.primary,
      },}
  });

  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <Sidnavbar />
      </div>
    </ThemeProvider>
  );
}

export default App;

variables.modules.scss

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

// bg and text colors
$background_color: #f5f5f5;
$text_color: #000000;

// semantic colors
$success_color: #00b913;
$error_color: #bd0000;
$warning_color: #b99000;
$info_color: #17a2b8;
$link_color: rgba(36, 32, 209, 1);

// media quary
$phone: 600px;
$tablet: 768px;
$desktop: 1024px;

// Export variables
:export {
  primary: $primary_color;
  secondary: $secondary_color;

  success: $success_color;
  error: $error_color;
  warning: $warning_color;
  info: $info_color;
  link_color: $link_color;
}

I need to know how to do the theming concept and use it with both mui and scss.