123 lines
2.7 KiB
TypeScript
123 lines
2.7 KiB
TypeScript
import { createTheme } from '@mui/material/styles';
|
|
|
|
const backstoryTheme = createTheme({
|
|
palette: {
|
|
primary: {
|
|
main: '#1A2536', // Midnight Blue
|
|
contrastText: '#D3CDBF', // Warm Gray
|
|
},
|
|
secondary: {
|
|
main: '#4A7A7D', // Dusty Teal
|
|
contrastText: '#FFFFFF', // White
|
|
},
|
|
text: {
|
|
primary: '#2E2E2E', // Charcoal Black
|
|
secondary: '#1A2536', // Midnight Blue
|
|
},
|
|
background: {
|
|
default: '#D3CDBF', // Warm Gray
|
|
paper: '#FFFFFF', // White
|
|
},
|
|
action: {
|
|
active: '#D4A017', // Golden Ochre
|
|
hover: 'rgba(212, 160, 23, 0.1)', // Golden Ochre with opacity
|
|
},
|
|
custom: {
|
|
highlight: '#D4A017', // Golden Ochre
|
|
contrast: '#2E2E2E', // Charcoal Black
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: "'Roboto', sans-serif",
|
|
h1: {
|
|
fontSize: '2rem',
|
|
fontWeight: 500,
|
|
color: '#2E2E2E', // Charcoal Black
|
|
},
|
|
h2: {
|
|
fontSize: '1.75rem',
|
|
fontWeight: 500,
|
|
color: '#2E2E2E', // Charcoal Black
|
|
marginBottom: '1rem',
|
|
},
|
|
h3: {
|
|
fontSize: '1.5rem',
|
|
fontWeight: 500,
|
|
color: '#2E2E2E', // Charcoal Black
|
|
marginBottom: '0.75rem',
|
|
},
|
|
h4: {
|
|
fontSize: '1.25rem',
|
|
fontWeight: 500,
|
|
color: '#2E2E2E', // Charcoal Black
|
|
marginBottom: '0.5rem',
|
|
},
|
|
body1: {
|
|
fontSize: '1rem',
|
|
color: '#2E2E2E', // Charcoal Black
|
|
marginBottom: '0.5rem',
|
|
},
|
|
body2: {
|
|
fontSize: '0.875rem',
|
|
color: '#2E2E2E', // Charcoal Black
|
|
},
|
|
},
|
|
components: {
|
|
MuiLink: {
|
|
styleOverrides: {
|
|
root: {
|
|
color: '#4A7A7D', // Dusty Teal (your secondary color)
|
|
textDecoration: 'none',
|
|
'&:hover': {
|
|
color: '#D4A017', // Golden Ochre on hover
|
|
textDecoration: 'underline',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
textTransform: 'none',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(212, 160, 23, 0.2)', // Golden Ochre hover
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiAppBar: {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: '#1A2536', // Midnight Blue
|
|
},
|
|
},
|
|
},
|
|
MuiPaper: {
|
|
styleOverrides: {
|
|
root: {
|
|
// padding: '0.5rem',
|
|
borderRadius: '4px',
|
|
},
|
|
},
|
|
},
|
|
MuiList: {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: '0.5rem',
|
|
},
|
|
},
|
|
},
|
|
MuiListItem: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: '4px',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(212, 160, 23, 0.1)', // Golden Ochre with opacity
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export { backstoryTheme }; |