diff options
Diffstat (limited to 'src/ThemeContextProvider.tsx')
-rw-r--r-- | src/ThemeContextProvider.tsx | 32 |
1 files changed, 22 insertions, 10 deletions
diff --git a/src/ThemeContextProvider.tsx b/src/ThemeContextProvider.tsx index 87b401a..6ae1430 100644 --- a/src/ThemeContextProvider.tsx +++ b/src/ThemeContextProvider.tsx @@ -2,6 +2,7 @@ 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; @@ -22,18 +23,29 @@ function ThemeContextProvider({ children }: ThemeProviderProps) { ); const toggleColorMode = () => { - setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); + setMode((prevMode: PaletteMode) => + prevMode === 'light' ? 'dark' : 'light' + ); }; - const theme = useMemo( - () => - createTheme({ - palette: { - mode, - }, - }), - [mode] - ); + 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 }}> |