76 lines
1.3 KiB
TypeScript
76 lines
1.3 KiB
TypeScript
import { createTheme } from '@mui/material/styles';
|
|
|
|
// Define your color palette
|
|
const lightPalette = {
|
|
primary: {
|
|
main: '#1976d2', // Blue color
|
|
},
|
|
secondary: {
|
|
main: '#d32f2f', // Red color
|
|
},
|
|
background: {
|
|
default: '#fafafa',
|
|
paper: '#ffffff',
|
|
},
|
|
text: {
|
|
primary: '#000000',
|
|
secondary: '#555555',
|
|
},
|
|
};
|
|
|
|
const darkPalette = {
|
|
primary: {
|
|
main: '#90caf9', // Light blue
|
|
},
|
|
secondary: {
|
|
main: '#f48fb1', // Light pink
|
|
},
|
|
background: {
|
|
default: '#121212',
|
|
paper: '#1d1d1d',
|
|
},
|
|
text: {
|
|
primary: '#ffffff',
|
|
secondary: '#bbbbbb',
|
|
},
|
|
};
|
|
|
|
// Typography customization
|
|
const typography = {
|
|
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
|
h1: {
|
|
fontSize: '3rem',
|
|
fontWeight: 700,
|
|
},
|
|
h2: {
|
|
fontSize: '2.5rem',
|
|
fontWeight: 700,
|
|
},
|
|
body1: {
|
|
fontSize: '1rem',
|
|
fontWeight: 400,
|
|
},
|
|
};
|
|
|
|
// Create the theme based on the light or dark mode preference
|
|
const theme = createTheme({
|
|
palette: {
|
|
mode: 'light', // Change this to 'dark' for dark mode
|
|
...(process.env.NODE_ENV === 'development' // Switch for dev mode
|
|
? lightPalette
|
|
: darkPalette),
|
|
},
|
|
typography,
|
|
breakpoints: {
|
|
values: {
|
|
xs: 0,
|
|
sm: 600,
|
|
md: 960,
|
|
lg: 1280,
|
|
xl: 1920,
|
|
},
|
|
},
|
|
});
|
|
|
|
export default theme;
|