Темная или светлая версия

Answer 1

Используем Switch оператор в шапку
Переходим в App:
Добавляем стиль:
const theme = createTheme(({
palette: {
mode: themeMode === ‘light’ ? ‘light’ : ‘dark’,
primary: {
main: ‘#0fa685’,

        }
    }

})) Используем useState для изменения состояния: const [themeMode, setThemeMode] = useState<ThemeMode>('light')  Прописываем функцию:  const changeModeHandler = () => {
    setThemeMode(themeMode === 'light' ? 'dark' : 'light')
} Делаем переброс в Шапку, так как Свитч находится там type Props = {
changeModeHandler: () => void }

!!! Используем useTheme() - чтобы смогли через App перебраться в Шапку и взаимодействовать с переменной theme
const theme = useTheme()

type Props = {
changeModeHandler: () => void
}

export default function ButtonAppBar({changeModeHandler}: Props) {
const theme = useTheme()
return (
<Box sx={{ flexGrow: 1, marginBottom: ‘80px’ }}>
<AppBar>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon></MenuIcon>
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<MenuButton color="inherit" background = {theme.palette.primary.main}>Login</MenuButton>
<MenuButton>Logout</MenuButton>
<MenuButton>Faq</MenuButton>
<Switch onChange={changeModeHandler}/>
</Toolbar>
</AppBar>
</Box>
);
}

Заменить весь Бэкграунд

<CssBaseline></CssBaseline>

в App