| import { createTheme, alpha, Theme } from "@mui/material/styles";
|
|
|
| const getDesignTokens = (mode: 'light' | 'dark') => ({
|
| typography: {
|
| fontFamily: [
|
| "-apple-system",
|
| "BlinkMacSystemFont",
|
| '"Segoe UI"',
|
| "Roboto",
|
| '"Helvetica Neue"',
|
| "Arial",
|
| "sans-serif",
|
| ].join(","),
|
| h1: {
|
| fontFamily: '"Source Sans Pro", sans-serif',
|
| },
|
| h2: {
|
| fontFamily: '"Source Sans Pro", sans-serif',
|
| },
|
| h3: {
|
| fontFamily: '"Source Sans Pro", sans-serif',
|
| },
|
| h4: {
|
| fontFamily: '"Source Sans Pro", sans-serif',
|
| },
|
| h5: {
|
| fontFamily: '"Source Sans Pro", sans-serif',
|
| },
|
| h6: {
|
| fontFamily: '"Source Sans Pro", sans-serif',
|
| },
|
| subtitle1: {
|
| fontFamily: '"Source Sans Pro", sans-serif',
|
| },
|
| subtitle2: {
|
| fontFamily: '"Source Sans Pro", sans-serif',
|
| },
|
| },
|
| palette: {
|
| mode,
|
| primary: {
|
| main: "#4F86C6",
|
| light: mode === "light" ? "#7BA7D7" : "#6B97D7",
|
| dark: mode === "light" ? "#2B5C94" : "#3B6CA4",
|
| 50: mode === "light" ? alpha("#4F86C6", 0.05) : alpha("#4F86C6", 0.15),
|
| 100: mode === "light" ? alpha("#4F86C6", 0.1) : alpha("#4F86C6", 0.2),
|
| 200: mode === "light" ? alpha("#4F86C6", 0.2) : alpha("#4F86C6", 0.3),
|
| contrastText: "#fff",
|
| },
|
| background: {
|
| default: mode === "light" ? "#f8f9fa" : "#0a0a0a",
|
| paper: mode === "light" ? "#fff" : "#1a1a1a",
|
| subtle: mode === "light" ? "grey.100" : "grey.900",
|
| hover: mode === "light" ? "action.hover" : alpha("#fff", 0.08),
|
| tooltip: mode === "light" ? alpha("#212121", 0.9) : alpha("#fff", 0.9),
|
| },
|
| text: {
|
| primary: mode === "light" ? "rgba(0, 0, 0, 0.87)" : "#fff",
|
| secondary:
|
| mode === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.7)",
|
| disabled:
|
| mode === "light" ? "rgba(0, 0, 0, 0.38)" : "rgba(255, 255, 255, 0.5)",
|
| hint:
|
| mode === "light" ? "rgba(0, 0, 0, 0.38)" : "rgba(255, 255, 255, 0.5)",
|
| },
|
| divider:
|
| mode === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(255, 255, 255, 0.18)",
|
| action: {
|
| active:
|
| mode === "light" ? "rgba(0, 0, 0, 0.54)" : "rgba(255, 255, 255, 0.7)",
|
| hover:
|
| mode === "light" ? "rgba(0, 0, 0, 0.04)" : "rgba(255, 255, 255, 0.08)",
|
| selected:
|
| mode === "light" ? "rgba(0, 0, 0, 0.08)" : "rgba(255, 255, 255, 0.16)",
|
| disabled:
|
| mode === "light" ? "rgba(0, 0, 0, 0.26)" : "rgba(255, 255, 255, 0.3)",
|
| disabledBackground:
|
| mode === "light" ? "rgba(0, 0, 0, 0.12)" : "rgba(255, 255, 255, 0.12)",
|
| },
|
| },
|
| shape: {
|
| borderRadius: 6,
|
| },
|
| components: {
|
| MuiCssBaseline: {
|
| styleOverrides: {
|
| "html, body": {
|
| backgroundColor: "background.default",
|
| color: mode === "dark" ? "#fff" : "#000",
|
| },
|
| body: {
|
| "& *::-webkit-scrollbar": {
|
| width: 8,
|
| height: 8,
|
| backgroundColor: "transparent",
|
| },
|
| "& *::-webkit-scrollbar-thumb": {
|
| borderRadius: 6,
|
| backgroundColor:
|
| mode === "light" ? alpha("#000", 0.2) : alpha("#fff", 0.1),
|
| "&:hover": {
|
| backgroundColor:
|
| mode === "light" ? alpha("#000", 0.3) : alpha("#fff", 0.15),
|
| },
|
| },
|
| },
|
| },
|
| },
|
| MuiButton: {
|
| styleOverrides: {
|
| root: {
|
| borderRadius: 6,
|
| textTransform: 'none',
|
| fontWeight: 600,
|
| },
|
| },
|
| },
|
| MuiPaper: {
|
| defaultProps: {
|
| elevation: 0,
|
| },
|
| styleOverrides: {
|
| root: {
|
| backgroundImage: "none",
|
| boxShadow: "none",
|
| border: "1px solid",
|
| borderColor:
|
| mode === "light"
|
| ? "rgba(0, 0, 0, 0.15)!important"
|
| : "rgba(255, 255, 255, 0.18)!important",
|
| },
|
| rounded: {
|
| borderRadius: 10,
|
| },
|
| },
|
| },
|
|
|
| MuiTableCell: {
|
| styleOverrides: {
|
| root: {
|
| borderColor: (theme: Theme) =>
|
| alpha(
|
| theme.palette.divider,
|
| theme.palette.mode === "dark" ? 0.1 : 0.2
|
| ),
|
| },
|
| head: {
|
| backgroundColor: mode === "light" ? "grey.50" : "grey.900",
|
| color: "text.primary",
|
| fontWeight: 600,
|
| },
|
| },
|
| },
|
| MuiTableRow: {
|
| styleOverrides: {
|
| root: {
|
| backgroundColor: "transparent",
|
| },
|
| },
|
| },
|
| MuiTableContainer: {
|
| styleOverrides: {
|
| root: {
|
| backgroundColor: "background.paper",
|
| borderRadius: 6,
|
| border: "none",
|
| boxShadow: "none",
|
| },
|
| },
|
| },
|
| MuiSlider: {
|
| styleOverrides: {
|
| root: {
|
| "& .MuiSlider-valueLabel": {
|
| backgroundColor: "background.paper",
|
| color: "text.primary",
|
| border: "1px solid",
|
| borderColor: "divider",
|
| boxShadow:
|
| mode === "light"
|
| ? "0px 2px 4px rgba(0, 0, 0, 0.1)"
|
| : "0px 2px 4px rgba(0, 0, 0, 0.3)",
|
| },
|
| },
|
| thumb: {
|
| "&:hover": {
|
| boxShadow: (theme: Theme) =>
|
| `0px 0px 0px 8px ${alpha(
|
| theme.palette.primary.main,
|
| mode === "light" ? 0.08 : 0.16
|
| )}`,
|
| },
|
| "&.Mui-active": {
|
| boxShadow: (theme: Theme) =>
|
| `0px 0px 0px 12px ${alpha(
|
| theme.palette.primary.main,
|
| mode === "light" ? 0.08 : 0.16
|
| )}`,
|
| },
|
| },
|
| track: {
|
| border: "none",
|
| },
|
| rail: {
|
| opacity: mode === "light" ? 0.38 : 0.3,
|
| },
|
| mark: {
|
| backgroundColor: mode === "light" ? "grey.400" : "grey.600",
|
| },
|
| markLabel: {
|
| color: "text.secondary",
|
| },
|
| },
|
| },
|
| MuiTextField: {
|
| styleOverrides: {
|
| root: {
|
| "& .MuiOutlinedInput-root": {
|
| borderRadius: 6,
|
| },
|
| },
|
| },
|
| },
|
| MuiChip: {
|
| styleOverrides: {
|
| root: {
|
| borderRadius: 6,
|
| fontWeight: 600,
|
| },
|
| outlinedInfo: {
|
| borderWidth: 2,
|
| fontWeight: 600,
|
| bgcolor: "info.100",
|
| borderColor: "info.400",
|
| color: "info.700",
|
| "& .MuiChip-label": {
|
| px: 1.2,
|
| },
|
| "&:hover": {
|
| bgcolor: "info.200",
|
| },
|
| },
|
| outlinedWarning: {
|
| borderWidth: 2,
|
| fontWeight: 600,
|
| bgcolor: "warning.100",
|
| borderColor: "warning.400",
|
| color: "warning.700",
|
| "& .MuiChip-label": {
|
| px: 1.2,
|
| },
|
| "&:hover": {
|
| bgcolor: "warning.200",
|
| },
|
| },
|
| outlinedSuccess: {
|
| borderWidth: 2,
|
| fontWeight: 600,
|
| bgcolor: "success.100",
|
| borderColor: "success.400",
|
| color: "success.700",
|
| "& .MuiChip-label": {
|
| px: 1.2,
|
| },
|
| "&:hover": {
|
| bgcolor: "success.200",
|
| },
|
| },
|
| outlinedError: {
|
| borderWidth: 2,
|
| fontWeight: 600,
|
| bgcolor: "error.100",
|
| borderColor: "error.400",
|
| color: "error.700",
|
| "& .MuiChip-label": {
|
| px: 1.2,
|
| },
|
| "&:hover": {
|
| bgcolor: "error.200",
|
| },
|
| },
|
| outlinedPrimary: {
|
| borderWidth: 2,
|
| fontWeight: 600,
|
| bgcolor: "primary.100",
|
| borderColor: "primary.400",
|
| color: "primary.700",
|
| "& .MuiChip-label": {
|
| px: 1.2,
|
| },
|
| "&:hover": {
|
| bgcolor: "primary.200",
|
| },
|
| },
|
| outlinedSecondary: {
|
| borderWidth: 2,
|
| fontWeight: 600,
|
| bgcolor: "secondary.100",
|
| borderColor: "secondary.400",
|
| color: "secondary.700",
|
| "& .MuiChip-label": {
|
| px: 1.2,
|
| },
|
| "&:hover": {
|
| bgcolor: "secondary.200",
|
| },
|
| },
|
| },
|
| },
|
| MuiIconButton: {
|
| styleOverrides: {
|
| root: {
|
| borderRadius: 6,
|
| padding: "8px",
|
| "&.MuiIconButton-sizeSmall": {
|
| padding: "4px",
|
| borderRadius: 4,
|
| },
|
| },
|
| },
|
| },
|
| MuiTooltip: {
|
| styleOverrides: {
|
| tooltip: {
|
| backgroundColor:
|
| mode === "light" ? alpha("#212121", 0.9) : alpha("#424242", 0.9),
|
| color: "#fff",
|
| fontSize: "0.875rem",
|
| padding: "8px 12px",
|
| maxWidth: 400,
|
| borderRadius: 6,
|
| lineHeight: 1.4,
|
| border: "1px solid",
|
| borderColor:
|
| mode === "light" ? alpha("#fff", 0.1) : alpha("#fff", 0.05),
|
| boxShadow:
|
| mode === "light"
|
| ? "0 2px 8px rgba(0, 0, 0, 0.15)"
|
| : "0 2px 8px rgba(0, 0, 0, 0.5)",
|
| "& b": {
|
| fontWeight: 600,
|
| color: "inherit",
|
| },
|
| "& a": {
|
| color: mode === "light" ? "#90caf9" : "#64b5f6",
|
| textDecoration: "none",
|
| "&:hover": {
|
| textDecoration: "underline",
|
| },
|
| },
|
| },
|
| arrow: {
|
| color:
|
| mode === "light" ? alpha("#212121", 0.9) : alpha("#424242", 0.9),
|
| "&:before": {
|
| border: "1px solid",
|
| borderColor:
|
| mode === "light" ? alpha("#fff", 0.1) : alpha("#fff", 0.05),
|
| },
|
| },
|
| },
|
| defaultProps: {
|
| arrow: true,
|
| enterDelay: 400,
|
| leaveDelay: 200,
|
| },
|
| },
|
| MuiAppBar: {
|
| styleOverrides: {
|
| root: {
|
| border: "none",
|
| borderBottom: "none",
|
| },
|
| },
|
| },
|
| },
|
| breakpoints: {
|
| values: {
|
| xs: 0,
|
| sm: 600,
|
| md: 900,
|
| lg: 1240,
|
| xl: 1536,
|
| },
|
| },
|
| });
|
|
|
| const getTheme = (mode: 'light' | 'dark') => {
|
| const tokens = getDesignTokens(mode);
|
| return createTheme(tokens);
|
| };
|
|
|
|
|
| export const theme = getTheme('light');
|
|
|
|
|
| export default getTheme;
|
|
|
