80 lines
1.5 KiB
TypeScript
80 lines
1.5 KiB
TypeScript
import { createTheme, responsiveFontSizes, ThemeOptions } from "@mui/material";
|
|
|
|
export const options = (themeType: "light" | "dark"): ThemeOptions => ({
|
|
palette: {
|
|
mode: themeType,
|
|
...(themeType === "light"
|
|
? {
|
|
background: {
|
|
default: "#f5f5f5",
|
|
paper: "#fff"
|
|
},
|
|
}
|
|
: {
|
|
background: {
|
|
default: "#0c101b",
|
|
paper: "#1c1f26"
|
|
},
|
|
}),
|
|
primary: {
|
|
main: "#00AEEF"
|
|
},
|
|
secondary: {
|
|
main: "#F39200"
|
|
},
|
|
error: {
|
|
main: "#e53935"
|
|
},
|
|
warning: {
|
|
main: "#fdd835"
|
|
},
|
|
info: {
|
|
main: "#29b6f6"
|
|
},
|
|
success: {
|
|
main: "#43a047"
|
|
},
|
|
divider: "rgba(0, 0, 0, 0.12)"
|
|
},
|
|
typography: {
|
|
fontFamily: `"Roboto", "Helvetica", "Arial", sans-serif`,
|
|
fontSize: 14,
|
|
h1: {
|
|
fontSize: "2.5rem"
|
|
},
|
|
h2: {
|
|
fontSize: "2rem"
|
|
},
|
|
h3: {
|
|
fontSize: "1.75rem"
|
|
},
|
|
h4: {
|
|
fontSize: "1.5rem"
|
|
},
|
|
h5: {
|
|
fontSize: "1.25rem"
|
|
},
|
|
h6: {
|
|
fontSize: "1rem"
|
|
},
|
|
button: {
|
|
textTransform: "none"
|
|
}
|
|
},
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
body: {
|
|
margin: 0,
|
|
padding: 0,
|
|
}
|
|
}
|
|
}
|
|
},
|
|
cssVarPrefix: "mui", // optional prefix for CSS vars
|
|
cssVariables: true
|
|
});
|
|
|
|
// Create both themes once for reuse
|
|
export const lightTheme = responsiveFontSizes(createTheme(options("light")));
|
|
export const darkTheme = responsiveFontSizes(createTheme(options("dark")));
|