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.