105 lines
2.5 KiB
JavaScript
105 lines
2.5 KiB
JavaScript
'use client'
|
|
|
|
import PropTypes from 'prop-types'
|
|
import {useState, useMemo, useEffect, createContext} from 'react'
|
|
import {createTheme, ThemeProvider} from '@mui/material/styles'
|
|
import CssBaseline from '@mui/material/CssBaseline'
|
|
|
|
import {grey, green, red, yellow} from '@mui/material/colors'
|
|
|
|
import '@fontsource/roboto/300.css'
|
|
import '@fontsource/roboto/400.css'
|
|
import '@fontsource/roboto/500.css'
|
|
import '@fontsource/roboto/700.css'
|
|
import '../styles/nprogress.css'
|
|
|
|
import ChanjeTem from '../components/chanje-tem'
|
|
import NextAppDirEmotionCacheProvider from './emotion-cache-provider'
|
|
|
|
export const ColorModeContext = createContext({toggleColorMode: () => {}})
|
|
|
|
const getDesignTokens = mode => ({
|
|
palette: {
|
|
mode,
|
|
...(mode === 'light'
|
|
? {
|
|
primary: green,
|
|
secondary: red,
|
|
divider: green[200],
|
|
info: {
|
|
main: grey[900]
|
|
},
|
|
text: {
|
|
primary: grey[900],
|
|
secondary: grey[800],
|
|
},
|
|
}
|
|
: {
|
|
primary: {
|
|
main: yellow[500],
|
|
contrastText: '#000'
|
|
},
|
|
secondary: red,
|
|
info: {
|
|
main: '#fff'
|
|
},
|
|
divider: green[700],
|
|
background: {
|
|
default: '#082211',
|
|
paper: '#082211',
|
|
},
|
|
text: {
|
|
primary: '#fff',
|
|
secondary: grey[100],
|
|
},
|
|
}),
|
|
},
|
|
})
|
|
|
|
export default function ThemeRegistry(props) {
|
|
const [mode, setMode] = useState('light')
|
|
const colorMode = useMemo(
|
|
() => ({
|
|
toggleColorMode: () => {
|
|
setMode(prevMode =>
|
|
prevMode === 'light' ? 'dark' : 'light',
|
|
)
|
|
},
|
|
}),
|
|
[],
|
|
)
|
|
const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode])
|
|
|
|
const {children} = props
|
|
|
|
useEffect(() => {
|
|
const vyeLokalMod = localStorage.getItem('oki-dark')
|
|
const lokalMod = localStorage.getItem('oki-tem')
|
|
if (lokalMod === 'dark' || (vyeLokalMod && vyeLokalMod === 'true')) {
|
|
setMode('dark')
|
|
} else {
|
|
setMode('light')
|
|
}
|
|
|
|
if (lokalMod && vyeLokalMod) {
|
|
localStorage.removeItem('oki-dark')
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
|
|
<ColorModeContext.Provider value={colorMode}>
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline enableColorScheme />
|
|
<ChanjeTem />
|
|
{children}
|
|
</ThemeProvider>
|
|
</ColorModeContext.Provider>
|
|
</NextAppDirEmotionCacheProvider>
|
|
)
|
|
}
|
|
|
|
ThemeRegistry.propTypes = {
|
|
children: PropTypes.node.isRequired
|
|
}
|