208 lines
5.6 KiB
TypeScript
208 lines
5.6 KiB
TypeScript
import { createTheme } from '@mui/material/styles';
|
|
import './theme-augmentation.d.ts'; // Falls vorhanden
|
|
|
|
export const darkmode = createTheme({
|
|
palette: {
|
|
primary: {
|
|
main: '#0fd13f', // Ihre grüne Farbe
|
|
light: '#42a5f5',
|
|
dark: '#15650',
|
|
contrastText: '#fff',
|
|
},
|
|
secondary: {
|
|
main: '#9c27b0',
|
|
light: '#ba68c8',
|
|
dark: '#7b1fa2',
|
|
contrastText: '#fff',
|
|
},
|
|
// ✅ 'tertiary' entfernt - ist kein Standard MUI-Property
|
|
error: {
|
|
main: '#f44336',
|
|
light: '#e57373',
|
|
dark: '#d32f2f',
|
|
contrastText: '#fff',
|
|
},
|
|
warning: {
|
|
main: '#ed6c02',
|
|
light: '#ff9800',
|
|
dark: '#e65100',
|
|
contrastText: '#fff',
|
|
},
|
|
info: {
|
|
main: '#0288d1',
|
|
light: '#03a9f4',
|
|
dark: '#01579b',
|
|
contrastText: '#fff',
|
|
},
|
|
success: {
|
|
main: '#2e7d32',
|
|
light: '#4caf50',
|
|
dark: '#1b5e20',
|
|
contrastText: '#fff',
|
|
},
|
|
background: {
|
|
default: '#fafafa',
|
|
paper: '#ffffff',
|
|
},
|
|
text: {
|
|
primary: '#000000',
|
|
secondary: 'rgba(0, 0, 0, 0.6)',
|
|
},
|
|
},
|
|
// ✅ Sanfte Übergänge hinzugefügt
|
|
transitions: {
|
|
duration: {
|
|
shortest: 150,
|
|
shorter: 200,
|
|
short: 250,
|
|
standard: 300,
|
|
complex: 375,
|
|
enteringScreen: 225,
|
|
leavingScreen: 195,
|
|
},
|
|
easing: {
|
|
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
|
|
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
|
|
},
|
|
},
|
|
// ✅ Verbesserte Komponenten-Overrides
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
body: {
|
|
backgroundColor: '#fafafa',
|
|
transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
},
|
|
html: {
|
|
backgroundColor: '#fafafa',
|
|
transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
},
|
|
},
|
|
},
|
|
MuiAppBar: {
|
|
styleOverrides: {
|
|
colorPrimary: {
|
|
backgroundColor: '#0fd13f', // Ihre grüne NavBar
|
|
color: '#ffffff',
|
|
},
|
|
},
|
|
},
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 8,
|
|
textTransform: 'none', // Entfernt automatische Großschreibung
|
|
fontWeight: 600,
|
|
},
|
|
contained: {
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
'&:hover': {
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 12,
|
|
boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
|
|
transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'&:hover': {
|
|
boxShadow: '0 4px 20px rgba(0,0,0,0.12)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: {
|
|
'& .MuiOutlinedInput-root': {
|
|
borderRadius: 8,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiChip: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 16,
|
|
},
|
|
},
|
|
},
|
|
MuiPaper: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 8,
|
|
},
|
|
elevation1: {
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
|
|
},
|
|
elevation2: {
|
|
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
// ✅ Benutzerdefinierte Typografie
|
|
typography: {
|
|
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
|
h1: {
|
|
fontWeight: 700,
|
|
fontSize: '2.5rem',
|
|
lineHeight: 1.2,
|
|
},
|
|
h2: {
|
|
fontWeight: 600,
|
|
fontSize: '2rem',
|
|
lineHeight: 1.3,
|
|
},
|
|
h3: {
|
|
fontWeight: 600,
|
|
fontSize: '1.75rem',
|
|
lineHeight: 1.3,
|
|
},
|
|
h4: {
|
|
fontWeight: 600,
|
|
fontSize: '1.5rem',
|
|
lineHeight: 1.4,
|
|
},
|
|
h5: {
|
|
fontWeight: 600,
|
|
fontSize: '1.25rem',
|
|
lineHeight: 1.4,
|
|
},
|
|
h6: {
|
|
fontWeight: 600,
|
|
fontSize: '1rem',
|
|
lineHeight: 1.4,
|
|
},
|
|
body1: {
|
|
fontSize: '1rem',
|
|
lineHeight: 1.5,
|
|
},
|
|
body2: {
|
|
fontSize: '0.875rem',
|
|
lineHeight: 1.4,
|
|
},
|
|
button: {
|
|
fontWeight: 600,
|
|
textTransform: 'none',
|
|
},
|
|
},
|
|
// ✅ Benutzerdefinierte Breakpoints
|
|
breakpoints: {
|
|
values: {
|
|
xs: 0,
|
|
sm: 600,
|
|
md: 960,
|
|
lg: 1280,
|
|
xl: 1920,
|
|
},
|
|
},
|
|
// ✅ Angepasste Spacing-Funktion
|
|
spacing: 8, // 8px als Basis-Einheit
|
|
});
|