index.js

const colorRed = "#c50505";
const colorBlue = "#0479a8";
const colorBlackFont = "#282728";
const colorGrayLight = "#adadad";

const theme = {
  props: {
    MuiButton: {
      color: "secondary",
    },
    MuiLink: {
      color: "secondary",
    },
  },
  overrides: {
    MuiOutlinedInput: {
      root: {
        "&:hover $notchedOutline": {
          borderColor: colorBlue,
        },
        "@media (hover: none)": {
          "&:hover $notchedOutline": {
            blue: colorBlue,
          },
        },
        "&$focused $notchedOutline": {
          borderColor: colorBlue,
        },
      },
    },
    MuiListSubheader: {
      root: {
        color: colorGrayLight,
        fontWeight: "bolder",
      },
    },
  },
  palette: {
    type: "light",
    primary: {
      main: colorRed,
    },
    secondary: {
      main: colorBlue,
    },
    text: {
      primary: colorBlackFont,
    },
  },
  shape: {
    borderRadius: 2,
  },
};

module.exports = theme;