50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { ReactNode, useState } from 'react';
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
import { amber, grey } from '@mui/material/colors';
|
|
import { CssBaseline, PaletteMode } from '@mui/material';
|
|
import ThemeContext, { ThemeContextType } from './ThemeContext';
|
|
|
|
// Props 타입 선언
|
|
type MyThemeProviderProps = {
|
|
children: ReactNode
|
|
};
|
|
|
|
export default function MyThemeProvider({ children }: MyThemeProviderProps) {
|
|
const [mode, setMode] = useState<PaletteMode>('light');
|
|
const themeConfig: ThemeContextType = {
|
|
mode,
|
|
toggleMode: () => {
|
|
setMode(prev =>
|
|
prev === 'light' ? 'dark' : 'light'
|
|
)}
|
|
};
|
|
|
|
const theme = createTheme({
|
|
palette: {
|
|
mode,
|
|
...(mode === 'light'
|
|
? {
|
|
primary: amber,
|
|
}
|
|
: {
|
|
primary: {
|
|
main: grey[500],
|
|
contrastText: '#fff'
|
|
},
|
|
background: {
|
|
default: grey[900],
|
|
paper: grey[900],
|
|
},
|
|
}),
|
|
},
|
|
|
|
});
|
|
return (
|
|
<ThemeContext.Provider value={themeConfig}>
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
{children}
|
|
</ThemeProvider>
|
|
</ThemeContext.Provider>
|
|
);
|
|
} |