All files / src/theme index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import PropTypes from 'prop-types';
import { useState, useMemo, createContext } from 'react';
// material
import { CssBaseline } from '@mui/material';
import useMediaQuery from '@mui/material/useMediaQuery';
import {
  ThemeProvider as MUIThemeProvider,
  createTheme,
  StyledEngineProvider
} from '@mui/material/styles';
import { ThemeMode } from './types/Theme';
// theme overrides
import palette from './palette';
import typography from './typography';
import shadows from './shadows';
import neumorphism from './neumorphism';
// components overrides
import componentsOverride from './overrides';

export type { NeumorphismType, NeumorphismColorMode, NeumorphismParams } from './neumorphism';

export * from './types/Theme';
// ----------------------------------------------------------------------

export const ColorModeContext = createContext({ toggleColorMode: () => { } });

export default function ThemeProvider({ children }: any) {
  // get system theme type
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  console.log('prefersDarkMode = ', prefersDarkMode);

  const [mode, setMode] = useState<ThemeMode>(prefersDarkMode ? 'dark' : 'light');
  const colorMode = useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
      }
    }),
    []
  );

  const theme: any = useMemo(
    () => createTheme({
      neumorphism,
      palette: { ...palette, mode },
      shape: { borderRadius: 8 },
      typography,
      shadows,
      components: componentsOverride()
    } as any),
    [mode]
  );

  return (
    <StyledEngineProvider injectFirst>
      <ColorModeContext.Provider value={colorMode}>
        <MUIThemeProvider theme={theme}>
          <CssBaseline />
          {children}
        </MUIThemeProvider>
      </ColorModeContext.Provider>
    </StyledEngineProvider>
  );
}

ThemeProvider.propTypes = {
  children: PropTypes.node
};