client/src/config/theme.js

import { createTheme, alpha } from "@mui/material/styles";

const getDesignTokens = (mode) => ({
  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.12)" : "rgba(255, 255, 255, 0.12)",
    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: 4,
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        html: {
          backgroundColor: mode === "light" ? "#f8f9fa" : "#0a0a0a",
        },
        body: {
          backgroundColor: mode === "light" ? "#f8f9fa" : "#0a0a0a",
        },
      },
    },

    MuiTableCell: {
      styleOverrides: {
        root: {
          borderColor: (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,
        },
      },
    },
    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: 8,
          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) => {
  const tokens = getDesignTokens(mode);
  return createTheme(tokens);
};

export default getTheme;