106 lines
No EOL
2.4 KiB
JavaScript
106 lines
No EOL
2.4 KiB
JavaScript
import { createTheme } from '@mui/material/styles';
|
|
import { red, amber, grey, deepPurple } from '@mui/material/colors';
|
|
import { useMemo } from 'react';
|
|
import { useAppSelector } from '../hooks/reduxHooks';
|
|
import { selectDarkMode } from '../features/ui/uiSlice';
|
|
|
|
// Create a theme instance based on the dark mode state
|
|
export const createAppTheme = (darkMode) => {
|
|
return createTheme({
|
|
palette: {
|
|
mode: darkMode ? 'dark' : 'light',
|
|
primary: {
|
|
main: deepPurple[400],
|
|
light: deepPurple[300],
|
|
dark: deepPurple[600],
|
|
},
|
|
secondary: {
|
|
main: amber[500],
|
|
light: amber[300],
|
|
dark: amber[700],
|
|
},
|
|
error: {
|
|
main: red.A400,
|
|
},
|
|
background: {
|
|
default: darkMode ? grey[900] : '#f5f5f5',
|
|
paper: darkMode ? grey[800] : '#fff',
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: [
|
|
'Roboto',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Arial',
|
|
'sans-serif',
|
|
].join(','),
|
|
h1: {
|
|
fontSize: '2.5rem',
|
|
fontWeight: 500,
|
|
},
|
|
h2: {
|
|
fontSize: '2rem',
|
|
fontWeight: 500,
|
|
},
|
|
h3: {
|
|
fontSize: '1.75rem',
|
|
fontWeight: 500,
|
|
},
|
|
h4: {
|
|
fontSize: '1.5rem',
|
|
fontWeight: 500,
|
|
},
|
|
h5: {
|
|
fontSize: '1.25rem',
|
|
fontWeight: 500,
|
|
},
|
|
h6: {
|
|
fontSize: '1rem',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 6,
|
|
textTransform: 'none',
|
|
},
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 8,
|
|
boxShadow: darkMode
|
|
? '0 4px 20px rgba(0, 0, 0, 0.5)'
|
|
: '0 4px 20px rgba(0, 0, 0, 0.1)',
|
|
},
|
|
},
|
|
},
|
|
MuiAppBar: {
|
|
styleOverrides: {
|
|
root: {
|
|
boxShadow: darkMode
|
|
? '0 4px 20px rgba(0, 0, 0, 0.5)'
|
|
: '0 2px 10px rgba(0, 0, 0, 0.05)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// Default theme instance
|
|
const defaultTheme = createAppTheme(true);
|
|
|
|
// Custom hook to create theme based on current dark mode setting
|
|
export const useAppTheme = () => {
|
|
const darkMode = useAppSelector(selectDarkMode);
|
|
|
|
return useMemo(() => createAppTheme(darkMode), [darkMode]);
|
|
};
|
|
|
|
export default defaultTheme; |