/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.js
62 строки
1 KB
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import Box from '@mui/material/Box'; import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles'; import { amber, deepOrange, grey } from '@mui/material/colors'; const getDesignTokens = (mode) => ({ palette: { mode, primary: { ...amber, ...(mode === 'dark' && { main: amber[300], }), }, ...(mode === 'dark' && { background: { default: deepOrange[900], paper: deepOrange[900], }, }), text: { ...(mode === 'light' ? { primary: grey[900], secondary: grey[800], } : { primary: '#fff', secondary: grey[500], }), }, }, }); function MyApp() { const theme = useTheme(); return ( <Box sx={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'center', bgcolor: 'background.default', color: 'text.primary', borderRadius: 1, p: 3, }} > This is a {theme.palette.mode} mode theme with custom palette </Box> ); } const darkModeTheme = createTheme(getDesignTokens('dark')); export default function DarkThemeWithCustomPalette() { return ( <ThemeProvider theme={darkModeTheme}> <MyApp /> </ThemeProvider> ); }