64 lines
1.0 KiB
TypeScript
64 lines
1.0 KiB
TypeScript
import { createTheme } from "@mui/material/styles";
|
|
|
|
const palette = {
|
|
primary: {
|
|
main: "#1976d2",
|
|
},
|
|
secondary: {
|
|
main: "#d32f2f",
|
|
},
|
|
background: {
|
|
default: "#fafafa",
|
|
paper: "#ffffff",
|
|
primary: "rgb(69, 190, 171)",
|
|
},
|
|
text: {
|
|
primary: "#000000",
|
|
secondary: "#555555",
|
|
tertiary: "#fff",
|
|
},
|
|
button: {
|
|
primary: "#0070f3",
|
|
secondary: "##FF00FF",
|
|
},
|
|
action: {
|
|
hover: "rgba(0, 0, 0, 0.08)",
|
|
},
|
|
};
|
|
|
|
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
|
|
...palette,
|
|
},
|
|
// typography,
|
|
breakpoints: {
|
|
values: {
|
|
xs: 0,
|
|
sm: 600,
|
|
md: 960,
|
|
lg: 1280,
|
|
xl: 1920,
|
|
},
|
|
},
|
|
});
|
|
|
|
export default theme;
|