目前,我正在开发一个使用NEXT JS
和MUI 5
最新版本以及GraphQL
构建的Web应用程序。
我对这一点深信不疑
我确实想在LocalStorage中保持不断变化的黑暗模式,同时使用“www.example.com“提供的MUI指南实现https://mui.com/customization/dark-mode/#toggling-color-mode。
有没有人可以指导我,如果我切换开关,然后黑暗或光明模式将设置在本地存储?我需要你所有的建议。
我正在使用上下文API:
import { createContext, useMemo, useState } from 'react'
import { createTheme, ThemeProvider } from '@mui/material/styles'
// TODO: Export this one
export const ColorModeContext = createContext({ toggleColorMode: () => {} })
const ThemeContext = ({ children }) => {
const [mode, setMode] = useState('dark')
const colorMode = useMemo(
() => ({
toggleColorMode: () => {
setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'))
},
}),
[]
)
const theme = useMemo(
() =>
createTheme({
palette: {
mode,
primary: {
light: '#757ce8',
main: '#3f50b5',
dark: '#002884',
contrastText: '#fff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
},
}),
[mode]
)
return (
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</ColorModeContext.Provider>
)
}
export default ThemeContext
我在AppBar中实现了如下内容:
// * ___main_appbar_function___
export default function MyAppBar(props) {
const theme = useTheme()
const colorMode = useContext(ColorModeContext)
return (
<NoSsr>
<CssBaseline />
<HideOnScroll {...props}>
<AppBar color='inherit'>
<Toolbar variant='dense' component='div'>
<Box sx={root}>
<MySideBar />
<Typography component='div' variant='h5' textAlign='center'>
PJK
</Typography>
<Box sx={right}>
{/* <AuthModal /> */}
<motion.div
whileTap={{ rotate: 360 }}
// whileHover={{ rotate: 360 }}
transition={{ type: 'spring', stiffness: 50 }}
>
<IconButton onClick={refreshPage}>
<RotateRightIcon />
</IconButton>
</motion.div>
<IconButton
sx={{ ml: 1 }}
onClick={colorMode.toggleColorMode}
color='inherit'
>
{theme.palette.mode === 'dark' ? (
<Brightness7Icon />
) : (
<Brightness4Icon />
)}
</IconButton>
</Box>
</Box>
</Toolbar>
</AppBar>
</HideOnScroll>
<Toolbar />
</NoSsr>
)
}
3条答案
按热度按时间n8ghc7c11#
试试这个
np8igboo2#
这似乎为我工作,它检测系统偏好,并有一个选项,以切换黑暗和光明模式,可能不是最好的方式,它似乎为我工作。
App.js
theme/Theme.js
config/color-context.js
ThemeToggler.js
cbjzeqam3#
试试这个