How do you give material-ui drawer component a switchable theme? - reactjs

Question

I am making a react project but I have a problem getting my material-ui drawer to match with my dark/light switchable theme. I currently have given the drawer styling using makeStyles, but I can't for the life of me get it sync with ThemeProvider.
I have tried doing it all in ThemeProvider but the drawer required other methods. Then I tried doing it all with makeStyles and not using ThemeProvider at all but that didn't work either. I also tried putting a conditional ternary statement in makeStyles for this, but that didn't work.
Any help or advice that leads me in the right direction would be greatly appreciated!
function App() {
const dark_theme = createMuiTheme({
palette: {
primary: {
main: '#e78f23',
secondary: {
main: '#463d3d',
}
},
background: {
default: "#222222",
},
text: {
primary: "#ffffff"
},
}
})
const light_theme = createMuiTheme({
palete: {
primary: {
main: '#4892BC',
},
secondary: {
main: '#EEF3FF',
},
background: {
default: "#e4f0e2"
},
text: {
primary: "#000000"
},
}
});
const useStyles = makeStyles((theme) => ({
drawer: {
background : '#e78f23',
},
switchTrack: {
backgroundColor: "#000"
},
switchBase: {
color: "#000",
"&.Mui-checked": {
color: "white"
},
"&.Mui-checked + .MuiSwitch-track": {
backgroundColor: "white"
},
},
}));
const classes = useStyles()
const [light, setLight] = useState(true);
return (
<ThemeProvider theme={light ? light_theme : dark_theme}>
<CssBaseline />
<Router>
<main>
<Drawer id="Drawer" PaperProps={{className:classes.drawer}} open={drawerOpen} onClose={CloseDrawer}>
<List id="ListID">
<Button>
<ListItem button onClick={() => setLight(prev => !prev)} color="primary" class="themeButton">
<FormControl>
<FormLabel>Dark/Light</FormLabel>
<FormGroup>
<FormControlLabel
id="formControlLabel"
control = {
<Switch2
color="default"
classes={{
track: classes.switchTrack,
switchBase: classes.switchBase,
}}
size="medium"
position="center"
checked={checked}
onChange={toggleChecked}
labelPlacement="end"
/>
}
/>
</FormGroup>
</FormControl>
</ListItem>
</Button>