Switch / CssBaseline - Переход темы

Question 1

Переход темы со светлой на темную

Answer 1

В App:
const [themeMode, setThemeMode] = useState<ThemeMode>('light')
const materialTheme = createTheme ({
palette: {
mode: themeMode === 'light' ? 'light' : 'dark',
primary: {
main: '#ffad4c',
}
}
});</ThemeMode>

const changeModeHandler = () => {
    setThemeMode(themeMode == 'light' ? 'dark' : 'light')
}

return (
    <div className="app">
        <ThemeProvider theme={materialTheme}>
            <Container fixed>
            </Container>
            <CssBaseline/>
        </ThemeProvider>
    </div>
)

B MenuButton:
type ButtonAppBarType = {
onChangeMode: () => void
}

export default function ButtonAppBar({onChangeMode}:ButtonAppBarType) {
const theme = useTheme()
const changeModeHandler = () => {
onChangeMode()
}
return (
<Box sx={{ flexGrow: 1, paddingBottom: ‘80px’ }}>
<Switch color={‘default’}
onChange={changeModeHandler}/>
</Box>
);
}