diff options
Diffstat (limited to 'client/src/ThemeContextProvider.tsx')
-rw-r--r-- | client/src/ThemeContextProvider.tsx | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/client/src/ThemeContextProvider.tsx b/client/src/ThemeContextProvider.tsx new file mode 100644 index 0000000..6ae1430 --- /dev/null +++ b/client/src/ThemeContextProvider.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { ReactNode, createContext, useMemo, useState } from 'react'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import type { PaletteMode } from '@mui/material'; + +type ThemeContextType = { + toggleColorMode: () => void; +}; + +type ThemeProviderProps = { + children: ReactNode; +}; + +export const ThemeContext = createContext<ThemeContextType>({ + toggleColorMode: () => {}, +}); + +function ThemeContextProvider({ children }: ThemeProviderProps) { + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + const [mode, setMode] = useState<'light' | 'dark'>( + prefersDarkMode ? 'dark' : 'light' + ); + + const toggleColorMode = () => { + setMode((prevMode: PaletteMode) => + prevMode === 'light' ? 'dark' : 'light' + ); + }; + + const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + ...(mode === 'light' + ? { + primary: { + main: '#007bff', + }, + } + : { + primary: { + main: '#78bef8', + }, + }), + }, + }); + + const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]); + + return ( + <ThemeContext.Provider value={{ toggleColorMode }}> + <ThemeProvider theme={theme}>{children}</ThemeProvider> + </ThemeContext.Provider> + ); +} + +export default ThemeContextProvider; |