@mui/material#createTheme JavaScript Examples

The following examples show how to use @mui/material#createTheme. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ColoredButton.js    From react-saas-template with MIT License 6 votes vote down vote up 
function ColoredButton(props) {
  const { color, children, theme } = props;
  const buttonTheme = createTheme(adaptV4Theme({
    ...theme,
    palette: {
      primary: {
        main: color
      }
    }
  }));
  const buttonProps = (({ color, theme, children, ...o }) => o)(props);
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={buttonTheme}>
        <Button {...buttonProps} color="primary">
          {children}
        </Button>
      </ThemeProvider>
    </StyledEngineProvider>
  );
}
Example #2
Source File: DateTimePicker.js    From react-saas-template with MIT License 6 votes vote down vote up 
Theme2 = (theme) =>
  createTheme(
    adaptV4Theme({
      ...theme,
      overrides: {
        MuiOutlinedInput: {
          root: {
            width: 190,
            "@media (max-width:  400px)": {
              width: 160,
            },
            "@media (max-width:  360px)": {
              width: 140,
            },
            "@media (max-width:  340px)": {
              width: 120,
            },
          },
          input: {
            padding: "9px 14.5px",
          },
        },
      },
    })
  )
Example #3
Source File: index.js    From SimpleWeather with MIT License 6 votes vote down vote up 
theme = createTheme({
    palette: {
        primary: {
            main: '#ffffff',
            darker: '#ffffff'
        },
        secondary: {
            main: '#2d81ff',
            darker: '#2d81ff'
        }
    }
})
Example #4
Source File: initThemes.js    From matx-react with MIT License 6 votes vote down vote up 
function createMatxThemes() {
  let themes = {};

  forEach(themeColors, (value, key) => {
    themes[key] = createTheme(merge({}, themeOptions, value));
  });

  return themes;
}
Example #5
Source File: theme.js    From react-saas-template with MIT License 4 votes vote down vote up 
theme = createTheme(adaptV4Theme({
  palette: {
    primary: { main: primary },
    secondary: { main: secondary },
    common: {
      black,
      darkBlack
    },
    warning: {
      light: warningLight,
      main: warningMain,
      dark: warningDark
    },
    // Used to shift a color's luminance by approximately
    // two indexes within its tonal palette.
    // E.g., shift from Red 500 to Red 300 or Red 700.
    tonalOffset: 0.2,
    background: {
      default: background
    },
    spacing
  },
  breakpoints: {
    // Define custom breakpoint values.
    // These will apply to Material-UI components that use responsive
    // breakpoints, such as `Grid` and `Hidden`. You can also use the
    // theme breakpoint functions `up`, `down`, and `between` to create
    // media queries for these breakpoints
    values: {
      xl,
      lg,
      md,
      sm,
      xs
    }
  },
  border: {
    borderColor: borderColor,
    borderWidth: borderWidth
  },
  overrides: {
    MuiExpansionPanel: {
      root: {
        position: "static"
      }
    },
    MuiTableCell: {
      root: {
        paddingLeft: spacing * 2,
        paddingRight: spacing * 2,
        borderBottom: `${borderWidth}px solid ${borderColor}`,
        [`@media (max-width:  ${sm}px)`]: {
          paddingLeft: spacing,
          paddingRight: spacing
        }
      }
    },
    MuiDivider: {
      root: {
        backgroundColor: borderColor,
        height: borderWidth
      }
    },
    MuiPrivateNotchedOutline: {
      root: {
        borderWidth: borderWidth
      }
    },
    MuiListItem: {
      divider: {
        borderBottom: `${borderWidth}px solid ${borderColor}`
      }
    },
    MuiDialog: {
      paper: {
        width: "100%",
        maxWidth: 430,
        marginLeft: spacing,
        marginRight: spacing
      }
    },
    MuiTooltip: {
      tooltip: {
        backgroundColor: darkBlack
      }
    },
    MuiExpansionPanelDetails: {
      root: {
        [`@media (max-width:  ${sm}px)`]: {
          paddingLeft: spacing,
          paddingRight: spacing
        }
      }
    }
  },
  typography: {
    useNextVariants: true
  }
}))
Example #6
Source File: index.js    From CRM with Apache License 2.0 4 votes vote down vote up 
darkTheme = createTheme({
  palette: {
    mode: "dark",
  },
  typography: {
    fontFamily: [
      "Poppins",
      "Trebuchet MS",
      "Lucida Sans Unicode",
      "Lucida Grande",
      "Lucida Sans",
      "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
    fontSize: 12,
    color: "#525f7f",
    fontWeight: 400,
  },
  components: {
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundImage: "none",
          backgroundColor: "transparent",
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: "none",
          borderRadius: "0.4285rem",
          color: "inherit",
          boxShadow: "none",
          padding: "11px 25px",
          fontWeight: 600,
          fontSize: "0.875rem",
        },
        outlinedPrimary: {
          borderColor: "#e14eca",
          color: "#e14eca",
        },
        containedPrimary: {
          color: "white",
          backgroundImage:
            "linear-gradient(to bottom left,#e14eca,#ba54f5,#e14eca)",
          backgroundSize: "210% 210%",
          backgroundPosition: "100% 0",
          backgroundColor: "#e14eca",
          transition: "all .6s ease",
          "&:hover": {
            backgroundPosition: "0 100%",
            boxShadow: "2px 2px 6px rgba(0 0 0 ,0.4)",
          },
        },
        containedSizeSmall: {
          borderRadius: "0.2857rem",
          padding: "5px 15px",
        },
        outlinedSecondary: {
          //   borderColor: "#3358f4",
          //   color: "#3358f4",
          borderColor: "#1d8cf8",
          color: "#1d8cf8",
          transition: "all .6s ease",
          "&:hover": {
            borderColor: "#3358f4",
            color: "#fff",
            backgroundImage:
              "linear-gradient(to bottom left,#1d8cf8,#3358f4,#1d8cf8)",
            boxShadow: "2px 2px 6px rgba(0 0 0 ,0.4)",
          },
        },
        containedSecondary: {
          color: "white",
          backgroundImage:
            "linear-gradient(to bottom left,#1d8cf8,#3358f4,#1d8cf8)",
          backgroundSize: "210% 210%",
          backgroundPosition: "100% 0",
          backgroundColor: "#1d8cf8",
          transition: "all .6s ease",
          "&:hover": {
            backgroundPosition: "0 100%",
            boxShadow: "2px 2px 6px rgba(0 0 0 ,0.4)",
          },
        },
      },
    },
    MuiTableBody: {
      styleOverrides: {
        root: {
          "& .MuiTableRow-root:last-of-type": {
            "& .MuiTableCell-root": {
              borderBottom: 0,
            },
          },
        },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          "& input::placeholder": {
            color: "#222a42",
            opacity: 0.6,
          },
          "& label": {
            color: "#222a42",
            opacity: 1,
            fontWeight: 500,
          },
        },
      },
      "& label.Mui-focused": {
        color: "green",
      },
    },
  },
})