diff options
Diffstat (limited to 'src/ThemeContextProvider.tsx')
-rw-r--r-- | src/ThemeContextProvider.tsx | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/src/ThemeContextProvider.tsx b/src/ThemeContextProvider.tsx new file mode 100644 index 0000000..970f9d8 --- /dev/null +++ b/src/ThemeContextProvider.tsx @@ -0,0 +1,44 @@ +import { ReactNode, createContext, useMemo, useState } from 'react'; +import { StyledEngineProvider, ThemeProvider, createTheme } from '@mui/material/styles'; + +type ThemeContextType = { + switchColorMode: () => void; +}; + +type ThemeProviderProps = { + children: ReactNode; +}; + +export const ThemeContext = createContext<ThemeContextType>({ + switchColorMode: () => {} +}); + +function ThemeContextProvider({ children }: ThemeProviderProps) { + const [mode, setMode] = useState<'light' | 'dark'>('light'); + + const switchColorMode = () => { + setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); + }; + + const theme = useMemo( + () => + createTheme({ + palette: { + mode, + } + }), + [mode] + ); + + return ( + <StyledEngineProvider injectFirst> + <ThemeContext.Provider value={{ switchColorMode }}> + <ThemeProvider theme={theme}> + {children} + </ThemeProvider> + </ThemeContext.Provider> + </StyledEngineProvider> + ); +} + +export default ThemeContextProvider; |