pawol.nu/app/theme-registy.js

'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
}