I have this dark/light theme setup. for some reason it is not switching any idea what is the culprit ? the light state is getting updated on click but only once.. then the theme is not changing.
import React, { useState } from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import Container from "@material-ui/core/Container";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import EmojiObjectsIcon from "@material-ui/icons/EmojiObjects";
const themeLight = createTheme({
palette: {
background: {
default: "#e4f0e2"
}
}
});
const themeDark = createTheme({
palette: {
background: {
default: "#222222"
},
text: {
primary: "#ffffff"
}
}
});
export default function SignIn() {
const [light, setLight] = useState(true);
console.log(light);
return (
<ThemeProvider theme={light ? themeLight : themeDark}>
<EmojiObjectsIcon onClick={() => setLight((prev) => !prev)} />
<Container component="main" maxWidth="xs">
<CssBaseline />
</Container>
</ThemeProvider>
);
}