@material-ui/core/styles#createTheme TypeScript Examples

MaterialTheme = createTheme({
  typography: {
    // Adjust Material UI REM calculations to match
    // the font adjustments we use globally
    htmlFontSize: BASE_FONT_SIZE,
    fontFamily: ['Verdana', 'Arial'].join(','),
  },
  palette: {
    primary: {
      main: '#0019A5',
      dark: '#000066',
    },
    secondary: {
      main: '#0090D0',
      light: '#41B6E6',
    },
    background: {
      default: '#FFFFFF',
    },
  },
})

export function useTheme(themePreference: ThemePreference): Theme {
  let prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
  if (themePreference === ThemePreference.Always) {
    prefersDarkMode = true;
  } else if (themePreference === ThemePreference.Never) {
    prefersDarkMode = false;
  }
  return createTheme({
    // Got color palette from https://htmlcolors.com/palette/31/stripe
    palette: {
      primary: {
        main: "#4379FF",
      },
      secondary: {
        main: "#97FBD1",
      },
      background: {
        default: "#f5f7f9",
      },
      type: prefersDarkMode ? "dark" : "light",
    },
  });
}

export default function Theme() {
  return createTheme({
    palette: {
      type: 'dark',
      background: {
        default: '#202124',
        paper: '#43434f',
      },
      primary: {
        main: '#16c2d4',
      },
      secondary: {
        main: '#0F8C94',
      },
    },
  });
}

themeUI = createTheme({
  typography: {
    h6: {
      fontSize: 24,
      fontFamily: 'Tenor Sans, sans-serif',
      color: '#0D6B3D',
    },
  },
})

theme = createTheme({
  palette: {
    type: 'light',
    background: {
      default: '#efefef',
    },
    primary: {
      light: '#fcf2e8',
      main: '#dd7700',
      dark: orange[800],
    },
    secondary: {
      main: '#333333',
    },
  },
  typography: {
    fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
    h1: {
      fontSize: '1.3rem',
      fontWeight: 500,
    },
    h2: {
      fontSize: '1rem',
      fontWeight: 500,
    },
    h3: {
      fontSize: '0.8rem',
      fontWeight: 500,
    },
    body2: {
      fontFamily: '"IBM Plex Mono", monospace',
      fontWeight: 500,
      fontSize: '1rem',
    },
  },
})

darkTheme = createTheme({
    palette: {
        type: 'dark',
        primary: {
            light: '#6ec6ff',
            main: '#2196f3',
            dark: '#0069c0',
            contrastText: '#fff',
        },
    },
})

lightTheme = createTheme({
    palette: {
        type: 'light',
    },
})

theme = createTheme({
    mixins: {
        toolbar: {
            minHeight: ToolbarHeight,
        },
    },
})

defaultTheme = createTheme()

ThemeProvider = ({ children }: { children: ReactNode }) => {
  const currentThemeMap = useAppSelector(selectCurrentThemeMap) || blankTheme;
  const theme = currentThemeMap.primary
    ? createTheme({
        palette: {
          action: {
            active: currentThemeMap.onSurface,
            disabled: alpha(currentThemeMap.onSurface, 0.3),
            disabledBackground: alpha(currentThemeMap.onSurface, 0.12),
            hover: alpha(currentThemeMap.onSurface, 0.08),
            selected: alpha(currentThemeMap.onSurface, 0.16),
          },
          background: {
            default: currentThemeMap.background,
            paper: currentThemeMap.surface,
          },
          divider: alpha(currentThemeMap.onSurface, 0.12),
          error: {
            contrastText: currentThemeMap.onError,
            main: currentThemeMap.error,
          },
          primary: {
            contrastText: currentThemeMap.onPrimary,
            main: currentThemeMap.primary,
          },
          secondary: {
            contrastText: currentThemeMap.onSecondary,
            main: currentThemeMap.secondary,
          },
          text: {
            disabled: alpha(currentThemeMap.onSurface, 0.38),
            primary: alpha(currentThemeMap.onSurface, 0.87),
            secondary: alpha(currentThemeMap.onSurface, 0.6),
          },
          type: currentThemeMap.dark ? "dark" : "light",
        },
      })
    : createTheme();
  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
}

theme = createTheme(merge({}, defaultTheme, themeOptions))

defaultTheme = createTheme()

defaultTheme = createTheme()

defaultTheme = createTheme({
  palette: {
    primary: {
      main: '#008C86',
    },
  },
})

theme = createTheme({
  props: {
    MuiButtonBase: {
      disableRipple: true,
    },
  },
  palette: {
    primary: {
      main: "#2F3438",
      dark: "#1C1F23",
      light: "#41484d",
    },
    secondary: {
      main: "#81FEB7",
      dark: "#6AE9A720",
      contrastText: "#1C1F23"
    },
    text: {
      primary: "#FFFFFF",
    },
    error: {
      main: "#ED254E",
    },
    info: {
      main: "#3866F9",
    },
    warning: {
      main: "#FFC839",
    },
  },
  typography: {
    fontFamily: "Roboto Mono",
    h1: {
      fontSize: 30,
      [breakpoints.down("xs")]: {
        fontSize: 22
      }
    },
    subtitle1: {
      fontSize: 32,
    },
    subtitle2: {
      fontSize: 16,
      fontWeight: 400,
    },
    h3: {
      fontSize: 35,
      fontWeight: 400,
    },
    h2: {
      fontSize: 24,
    },
    h4: {
      fontSize: 21,
      [breakpoints.down("xs")]: {
        fontSize: 16
      }
    },
    h5: {
      fontSize: 35,
      [breakpoints.down("xs")]: {
        fontSize: 21
      }
    },
    body1: {
      fontSize: 18,
      [breakpoints.down("xs")]: {
        fontSize: 14
      }
    },
    body2: {
      fontSize: 16,
      [breakpoints.down("xs")]: {
        fontSize: 14
      }
    },
    h6: {
      fontSize: 14
    }
  },
  overrides: {
    MuiTypography: {
      root: {
        letterSpacing: "-0.03em !important",
        // lineHeight: "1.5 !important",
        // wordSpacing: "40",
      },
    },
    MuiSlider: {
      root: {
        color: "#3D3D3D",
      },
    },
    MuiTab: {
      root: {
        maxWidth: "100%",
      },
    },
    MuiTooltip: {
      tooltip: {
        backgroundColor: "#62eda5",
        fontSize: 14,
        padding: "10px 15px",
        color: "#1C1F23"
      },
    },
    MuiStepLabel: {
      label: {
        color: "#fff",
        opacity: 0.5,
        marginLeft: 15,
        lineHeight: "40px",
        "&$completed": {
          fontWeight: 300,
        },
        "&$active": {
          fontWeight: 300,
        },
        "& .MuiStepLabel-completed": {
          fontWeight: 300,
        },
      },
      active: {
        color: "#fff !important",
        opacity: 1,
      },
      completed: {
        color: "#fff !important",
        opacity: 0.5,
        fontWeight: 300,
      },
    },
    MuiStepConnector: {
      lineVertical: {
        display: "none",
      },
    },
    MuiStepContent: {
      root: {
        borderLeft: "none",
      },
    },
    MuiStep: {
      root: {
        marginBottom: 15,
      },
    },
    MuiStepIcon: {
      active: {
        color: "#1C1F23 !important",
      },
      completed: {
        color: "#fff !important",
      },
      root: {
        height: 32,
        width: 32,
        color: "#1C1F23",
        border: "1px solid #3D3D3D",
        borderRadius: "50%",
        "&$active": {
          fill: "#fff",
          border: "1px solid #3D3D3D",
          borderRadius: "50%",
          "& $text": {
            fill: "#1C1F23",
            border: "1px solid #3D3D3D",
          },
        },
      },
      text: {
        fill: "#fff",
      },
    },
    MuiInput: {
      underline: {
        "&:after": {
          borderBottom: "none",
        },
        "&$focused:after": {
          borderBottom: "none",
        },
        "&$error:after": {
          borderBottom: "none",
        },
        "&:before": {
          borderBottom: "none",
        },
        "&:hover:not($disabled):not($focused):not($error):before": {
          borderBottom: "none",
        },
        "&$disabled:before": {
          borderBottom: "none",
        },
        "&:active:not($disabled):not($focused):not($error):before": {
          borderBottom: "none",
        },
      },
    },
    MuiButton: {
      root: {
        textTransform: "capitalize",
        fontWeight: 500,
        fontSize: 18,
        padding: "3px 14px",
        letterSpacing: "-0.03em",
        boxShadow: "none",

        "&:hover": {
          boxShadow: "none",
        },

        "&$disabled": {
          color: "#2F3438 !important",
          background: "#41484d !important",
        },
      },
      outlined: {
        "&$disabled": {
          border: "2px solid #3d3d3d",
        },
        borderWidth: "2px !important",
        borderRadius: "4px",
        padding: "1px 8px",
        fontSize: "1rem",
      },
    },
    MuiInputBase: {
      input: {
        textAlign: "center",
        color: "#fff",
      },
    },
    MuiDivider: {
      root: {
        marginTop: 16,
        marginBottom: 16,
      },
    },
    MuiDialog: {
      paper: {
        background: "#1C1F23",
        width: 615,
        maxWidth: "100%",
      },
      root: {
        height: "auto",
      },
      paperWidthSm: {
        maxWidth: 615,
        height: "auto",
      },
    },
    MuiFormControl: {
      root: {
        width: "100%",
      },
    },
    MuiDialogContent: {
      root: {
        padding: "42px 54px",
        "&:first-child": {
          paddingTop: "42px"
        }
      },
    },
    MuiSelect: {
      selectMenu: {
        textAlign: "right",
      },
    },
    MuiDialogContentText: {
      root: {
        marginBottom: 0,
      },
    },
    MuiSwitch: {
      root: {
        width: 75,
        height: 50,
      },
      switchBase: {
        color: "red",
        top: 8,
        left: 8,
        "$checked$checked + &": {
          opacity: 1,
          backgroundColor: "#1C1F23",
          color: "#81FEB7",
        },
      },
      track: {
        borderRadius: "40px",
        backgroundColor: "inherit",
        border: "1px solid #fff",
        opacity: 0.5,
        "$checked$checked + &": {
          opacity: 1,
          backgroundColor: "#1C1F23",
          color: "#81FEB7",
        },
      },
      thumb: {
        width: 18,
        height: 18,
        "$checked$checked + &": {
          color: "#81FEB7",
        },
      },
      colorSecondary: {
        color: "#fff",
        "$checked$checked + &": {
          color: "#81FEB7",
        },
        "& .Mui-checked": {
          color: "#81FEB7",
        },
      },
    },
    MuiFormHelperText: {
      root: {
        display: "none",
      },
    },
    MuiTable: {
      root: {
        borderRadius: "8px",
        backgroundColor: "#2F3438"
      }
    },
    MuiTableHead: {
      root: {
        minHeight: 58,
        fontSize: 16,
        fontWeight: 400,
        letterSpacing: "-0.01em",
        color: "#FFFFFF"
      }
    },
    MuiTableFooter: {
      root: {
        minHeight: 60,
        fontSize: 16,
        fontWeight: 400,
        letterSpacing: "-0.01em",
        color: "##81FEB7",
        borderTop: "0.3px solid rgba(125,140,139, 0.2)"
      }
    },
    MuiTableBody: {
      "root": {
        "& > *": {
          borderTop: "0.3px solid rgba(125,140,139, 0.2)",
          minHeight: 90,
        }
      }
    },
    MuiTableCell: {
      "root": {
        borderBottom: "unset"
      }
    },
    MuiTableRow: {
      root: {
          '& th:first-child, & td:first-child': {
            paddingLeft: 46,
          },
          '& th:last-child, & td:last-child': {
            paddingRight: 46,
          },
      }
    },
    MuiGrid: {
      'align-items-xs-center': {
        alignItems: 'center',
      },
    },
    MuiLinearProgress: {
      root: {
        borderRadius: 50,
        background: "rgba(125,140,139, 0.2) !important"
      },
    }
  },
})

Login = ({ theme }: { theme?: object }) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const login = useLogin();
  const notify = useNotify();
  const submit = (e: any) => {
    e.preventDefault();
    login({ username, password }).catch(() =>
      notify("Invalid email or password")
    );
  };

  return (
    <ThemeProvider theme={createTheme(defaultTheme)}>
      <div className={`${CLASS_NAME}`}>
        <div className={`${CLASS_NAME}__wrapper`}>
          <div className={`${CLASS_NAME}__box`}>
            <img
              src="https://amplication.com/assets/graphql.png"
              alt="GraphQL API"
            />
            <h2>Connect via GraphQL</h2>
            <div className={`${CLASS_NAME}__box__message`}>
              Connect to the server using GraphQL API with a complete and
              understandable description of the data in your API
            </div>
            <Button
              type="button"
              variant="contained"
              color="primary"
              href="/graphql"
            >
              Continue
            </Button>
          </div>
          <div className={`${CLASS_NAME}__box`}>
            <img
              src="https://amplication.com/assets/react-admin.png"
              alt="React-Admin"
            />
            <h2>Admin UI</h2>
            <div className={`${CLASS_NAME}__box__message`}>
              Sign in to a React-Admin client with ready-made forms for creating
              and editing all the data models of your application.
            </div>
            <form onSubmit={submit}>
              <label>
                <span>Username</span>

                <input
                  name="username"
                  type="textbox"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                />
              </label>
              <label>
                <span>password</span>

                <input
                  name="password"
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </label>
              <Button type="submit" variant="contained" color="primary">
                Log in
              </Button>
            </form>
          </div>
          <div className={`${CLASS_NAME}__box`}>
            <img
              src="https://amplication.com/assets/restapi.png"
              alt="REST API"
            />
            <h2>Connect via REST API</h2>
            <div className={`${CLASS_NAME}__box__message`}>
              Connect to the server using REST API with a built-in Swagger
              documentation
            </div>
            <Button
              type="button"
              variant="contained"
              color="primary"
              href="/api"
            >
              Continue
            </Button>
          </div>

          <Notification />
        </div>
        <div className={`${CLASS_NAME}__read-more`}>
          <span>Read </span>
          <a href="https://docs.amplication.com/docs/api" target="docs">
            Amplication docs
          </a>
          <span> to learn more</span>
        </div>
      </div>
    </ThemeProvider>
  );
}

theme = createTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#119656',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      main: '#DD1F1F',
    },
  },
  typography: {
    fontFamily: ['heebo', 'sans-serif'].join(','),
  },
  overrides: {
    MuiTableSortLabel: {
      icon: {
        opacity: '0.7',
      },
    },
    MuiBackdrop: {
      root: {
        backgroundColor: 'rgba(147,162,155,0.84)',
      },
    },
    MuiButton: {
      contained: {
        backgroundColor: '#CACACA',
        '&:hover': {
          backgroundColor: '#b5b5b5',
        },
      },
      outlinedPrimary: {
        border: '2px solid',
        '&:hover': {
          border: '2px solid',
        },
      },
    },
    MuiTablePagination: {
      caption: {
        fontSize: '16px',
        color: '#073F24',
      },
    },
    MuiOutlinedInput: {
      notchedOutline: {
        borderRadius: '12px',
        borderWidth: '2px',
      },
    },
    MuiDialogActions: {
      root: {
        justifyContent: 'flex-start',
      },
    },
    MuiCssBaseline: {
      '@global': {
        // override the pseudo-classes
        '.Mui-disabled': { cursor: 'not-allowed !important' },
      },
    },

    MuiListItem: {
      root: {
        color: '073F24',
      },
    },
    MuiCheckbox: {
      root: {
        color: '#073f24',
        '&$checked': {
          color: '#119656',
        },
      },
    },
    MuiMenuItem: {
      root: {
        '&:hover': {
          backgroundColor: '#EDF6F2',
        },
      },
    },
    MuiTypography: {
      h5: {
        '@media (max-width:768px)': {
          fontSize: '1rem',
        },
      },
      h6: {
        '@media (max-width:768px)': {
          fontSize: '1rem',
        },
      },
    },
  },
})