@material-ui/core#createMuiTheme JavaScript Examples

The following examples show how to use @material-ui/core#createMuiTheme. 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: index.js From telar-cli with MIT License

6 votes

theme = createMuiTheme({
  palette,
  typography,
  overrides,
  zIndex: {
    appBar: 1200,
    drawer: 1100
  }
})

Example #2

Source File: index.js From lifebank with MIT License

6 votes

theme = createMuiTheme({
  palette,
  typography,
  overrides,
  zIndex: {
    appBar: 1200,
    drawer: 1100
  }
})

Example #3

Source File: themeConfig.js From oftadeh-react-admin with MIT License

6 votes

getTheme = theme => {
  return createMuiTheme({
    palette: {
      type: theme.paletteType
      //   background: {
      //     default: theme.paletteType === "light" ? "#000" : "#fff"
      //   }
    },
    overrides: {
      MuiAppBar: {
        colorPrimary: {
          backgroundColor: theme.paletteType === "dark" && blueGrey.A900,
          color: theme.paletteType !== "dark" && grey
          //   background: theme.paletteType === "dark" && "#18202c"
        }
      },
      MuiDrawer: {
        paper: {
          background: theme.paletteType === "dark" ? blueGrey.A900 : "#0d131d",
          // this is where magic happens
          "& *": {
            color: theme.paletteType === "dark" && "rgba(255, 255, 255, 0.7)"
          }
        }
      }
    }
  });
}

Example #4

Source File: App.js From inventory-management-web with MIT License

6 votes

theme = createMuiTheme({
  palette: {
    primary: {
      light: '#8FB7D6',
      main: '#4796bd',
      dark: '#3d97A8',
    },
    background: {
      default: '#f3f9fb',
    },
  },
  typography: {
    fontFamily: [
      'Lato',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
    ].join(','),
  },
  spacing: factor => `${0.5 * factor}rem`,
  text: {
    color: {
      veryDark: '#122e40',
      dark: '#495d69',
      darkGray: '#333',
    },
  },
})

Example #5

Source File: ThemedApp.jsx From covid-trials-dashboard with MIT License

6 votes

ThemedApp = () => {
  const globalState = useContext(store)
  const { prefersDarkMode } = (globalState && globalState.state) || {}

  const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
          primary: {
            main: '#00275B',
          },
          secondary: {
            main: '#FF5761',
          },
        },
      }),
    [prefersDarkMode]
  )

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Suspense fallback='Loading...'>
        <Navbar />
        <Content>
          <Router />
        </Content>
        <div style={{ marginBottom: '46px' }} />
        <Footer />
      </Suspense>
    </ThemeProvider>
  )
}

Example #6

Source File: DatePicker.js From aws-perspective with Apache License 2.0

6 votes

materialTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#232f3e'
    }
  },
  overrides: {
    MuiPickersToolbar: {
      toolbar: {
        backgroundColor: '#232f3e'
      }
    },
    MuiPickersCalendarHeader: {
      switchHeader: {
        // backgroundColor: '#232f3e',
        // color: "#fff",
      }
    },
    MuiPickersDay: {
      day: {
        color: '#000'
      },
      daySelected: {
        backgroundColor: '#0073bb'
      },
      dayDisabled: {
        color: '#f2f3f3'
      },
      current: {
        color: '#fff'
      }
    },
    MuiPickersModal: {
      dialogAction: {
        color: '#fff'
      }
    }
  }
})

Example #7

Source File: app.js From x-admin-device-donation with MIT License

6 votes

function AsyncResources({ client }) {
  let introspectionResultObjects =
    client.cache?.data?.data?.ROOT_QUERY?.__schema.types
      ?.filter((obj) => obj.kind === "OBJECT")
      ?.map((elem) => elem.name);
  const resources = resourceConfig;
  let filteredResources = resources;
  if (introspectionResultObjects) {
    filteredResources = resources.filter((elem) =>
      introspectionResultObjects.includes(elem.name)
    );
  }
  if (!resources) return null;
  return (
    <MuiThemeProvider theme={createMuiTheme(customTheme)}>
      <AdminUI disableTelemetry loginPage={false} layout={customLayout}>
        {filteredResources.map((resource) => (
          <Resource
            key={resource.name}
            name={resource.name}
            list={resource.list}
            edit={resource.edit}
            create={resource.create}
            show={resource.show}
          />
        ))}
      </AdminUI>
    </MuiThemeProvider>
  );
}

Example #8

Source File: ThemeConfig.js From pomodor with MIT License

6 votes

ThemeConfig = ({ children }) => {
  const darkModeCached = +localStorage.getItem('darkMode')
  const [darkTheme, setDarkTheme] = useState(darkModeCached)

  const darkMode = useSelector((state) => +state.settings.darkMode)
  const progress = useSelector((state) => state.progress)

  const userTheme = createMuiTheme({
    palette: {
      type: darkTheme ? 'dark' : 'light',
      primary: {
        main: indigo[500],
        light: indigo[200],
        dark: '#272727',
      },
      secondary: {
        main: pink[300],
      },
      background: {
        default: darkTheme ? '#121212' : '#fafafa',
      },
      text: {
        primary: darkTheme ? '#DDE0F4' : '#424242',
        secondary: darkTheme ? '#fff9' : '#575757',
      },
    },
  })

  useEffect(() => {
    if (!progress) {
      localStorage.setItem('darkMode', darkMode)
      setDarkTheme(darkMode)
    }
  }, [darkMode, progress])

  return <ThemeProvider theme={userTheme}>{children || <></>}</ThemeProvider>
}

Example #9

Source File: theme.js From hacktoberfest-participants with MIT License

6 votes

darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
    background: {
      default: '#183d5e',
    },
    text: { primary: '#ffffff', secondary: '#c2cad2' },
    primary: {
      main: '#183d5e',
    },
    secondary: {
      main: '#072540',
    },
  },
  typography,
  breakpoints,
})

Example #10

Source File: theme.js From hacktoberfest-participants with MIT License

6 votes

lightTheme = createMuiTheme({
  palette: {
    type: 'light',
    background: {
      default: '#F1F7FA',
    },
    text: { primary: '#000000', secondary: '#c2cad2' },
    primary: {
      main: '#F1F7FA',
    },
    secondary: {
      main: '#FFFFFF',
    },
  },
  typography,
  breakpoints,
})

Example #11

Source File: index.js From Designer-Client with GNU General Public License v3.0

6 votes

theme = createMuiTheme({
  palette: {
  },
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
    fontSize: 14
  },
  spacing: 8,
  overrides:{}
})

Example #12

Source File: theme.js From akashlytics-deploy with GNU General Public License v3.0

6 votes

theme = createMuiTheme({
  palette: {
    background: {
      default: customColors.lightBg
    }
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        html: {
          WebkitFontSmoothing: "auto"
        }
      }
    },
    MuiInputBase: {
      input: { padding: "10px 14px" }
    },
    MuiOutlinedInput: {
      input: { padding: "10px 14px" }
    },
    MuiInputLabel: {
      outlined: {
        transform: "translate(14px, 12px) scale(1)"
      }
    },
    MuiTooltip: {
      arrow: {
        color: "rgba(0,0,0,.85)"
      },
      tooltip: {
        backgroundColor: "rgba(0,0,0,.85)"
      }
    }
  }
})

Example #13

Source File: About.js From macovidvaccines.com with MIT License

5 votes

theme = createMuiTheme(themeTemplate)

Example #14

Source File: theme.js From mfe-webpack-demo with MIT License

5 votes

theme = createMuiTheme({
  palette: { primary: green }
})

Example #15

Source File: AppOld.js From macovidvaccines.com with MIT License

5 votes

theme = createMuiTheme(themeTemplate)

Example #16

Source File: theme.js From module-federation-examples with MIT License

5 votes

theme = createMuiTheme({
  palette: { primary: green },
})

Example #17

Source File: App.js From macovidvaccines.com with MIT License

5 votes

theme = createMuiTheme(themeTemplate)

Example #18

Source File: YearMonthPickerStyles.js From medha-STPC with GNU Affero General Public License v3.0

5 votes

customTheme = createMuiTheme({
  overrides: {
    MuiPickersToolbar: {
      toolbar: {
        backgroundColor: "black"
      }
    },
    MuiButton: {
      textPrimary: {
        color: "#000"
      }
    },
    MuiPickersClock: {
      pin: {
        backgroundColor: "#000"
      }
    },
    MuiPickersClockPointer: {
      pointer: {
        backgroundColor: "#000"
      },
      thumb: {
        backgroundColor: "#000",
        border: "14px solid #000"
      },
      noPoint: {
        backgroundColor: "#000"
      }
    },
    MuiPickersClockNumber: {
      clockNumberSelected: {
        backgroundColor: "#000"
      }
    },
    MuiPickersDay: {
      daySelected: {
        backgroundColor: "#000",
        color: "#fff",
        "&:hover": {
          backgroundColor: "#8E8E8E",
          color: "#FFF"
        }
      },
      dayDisabled: {
        color: "light-gray"
      },
      current: {
        color: ""
      }
    }
  }
})

Example #19

Source File: App.js From linked-in-clone with MIT License

5 votes

App = () => {
  const classes = Styles();

  const dispatch = useDispatch();

  const { displayName } = useSelector((state) => state.user);

  const mode = useSelector((state) => state.util);

  const muiTheme = createMuiTheme({
    palette: {
      type: mode ? "dark" : "light",
    },
  });

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        dispatch(LoginAction(authUser));
      } else {
        dispatch(LogoutAction());
      }
    });
  }, []);

  return (
    <ThemeProvider theme={muiTheme}>
      {!displayName ? (
        <Login />
      ) : (
        <Grid
          container
          className={classes.app}
          style={{ backgroundColor: mode ? darkPrimary : LinkedInBgColor }}
        >
          <Grid
            item
            container
            className={classes.app__header}
            style={{
              boxShadow: mode && "0px 5px 10px -10px rgba(0,0,0,0.75)",
            }}
          >
            {/* Header */}
            <Header />
          </Grid>
          <Grid item container className={classes.app__body}>
            <Hidden smDown>
              <Grid item className={classes.body__sidebar} md={2}>
                {/* Sidebar */}
                <Sidebar />
              </Grid>
            </Hidden>
            <Grid item className={classes.body__feed} xs={12} sm={8} md={5}>
              {/* Feed */}
              <Grid item className={classes.feed__form}>
                <Form />
              </Grid>
              <Grid item className={classes.feed__posts}>
                <Posts />
              </Grid>
            </Grid>
            <Hidden smDown>
              <Grid item className={classes.body__widgets} md={3}>
                {/* Widgets */}
                <Widgets />
              </Grid>
            </Hidden>
          </Grid>
        </Grid>
      )}
    </ThemeProvider>
  );
}

Example #20

Source File: index.js From react-code-splitting-2021-04-26 with MIT License

5 votes

themes = {
  default: createMuiTheme({ ...defaultTheme, ...overrides }),
}

Example #21

Source File: index.js From turinghut-website with BSD Zero Clause License

5 votes

theme = createMuiTheme()

Example #22

Source File: Layout.js From project-s0-t2-env with MIT License

5 votes

function Layout(props) {
  const user = props.user;
  const names = props.names;
  const onChange = props.onChange;
  const theme = createMuiTheme({
    palette: {
      primary: {
        main: "#8ebd7b",
        contrastText: "#ffffff",
      },
      secondary: {
        main: "#758E9D",
      },
    },
    typography: {
      fontFamily: ["Lato"],
    },
  });

  return (
    <>
      <link
        href="https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap"
        rel="stylesheet"
      ></link>
      <style global jsx>{`
        body {
          font-family: Lato;
          letter-spacing: 1px;
          word-spacing: 2px;
          color: ${"#000000"};
        }
      `}</style>
      <ThemeProvider theme={theme}>
        <AppNavbar user={user} names={names} onChange={onChange} />
        {props.children}
      </ThemeProvider>
      <AppFooter />
    </>
  );
}

Example #23

Source File: index.js From lrc-staking-dapp with MIT License

5 votes

MuiTheme = createMuiTheme({
  overrides: {
    MuiButton: {
      containedSizeSmall: {
        paddingLeft: '14px',
        paddingRight: '14px',
      },
      root: {
        fontWeight: 'normal',
        textTransform: 'none',
      },
      text: {
        paddingLeft: '14px',
        paddingRight: '14px',
      },
    },
    MuiTooltip: {
      arrow: {
        color: vars.second,
      },
      tooltip: {
        backgroundColor: vars.second,
        fontSize: '13px',
        padding: '8px 16px',
      },
    },
  },
  palette: {
    contrastThreshold: 3,
    error: {
      main: vars.red,
    },
    grey: {
      300: vars.inheritDefault1,
      A100: vars.inheritDefault2,
    },
    helpers: {
      main: 'rgba(25, 46, 91, .035)',
      primary: vars.blue,
    },
    primary: {
      main: vars.primary,
    },
    secondary: {
      main: vars.secondary,
    },
    success: {
      main: vars.green,
    },
    tonalOffset: 0.1,
    warning: {
      main: vars.orange,
    },
  },
  shape: {
    borderRadius: '0.5rem',
  },
  typography,
})

Example #24

Source File: CustomDateTimePickerStyles.js From medha-STPC with GNU Affero General Public License v3.0

5 votes

customTheme = createMuiTheme({
  overrides: {
    MuiPickersToolbar: {
      toolbar: {
        backgroundColor: "black",
      },
    },
    MuiInputBase: {
      root: {
        fontSize: "14px",
      },
    },
    MuiFormLabel: {
      root: {
        color: "#000",
      },
    },
    MuiButton: {
      textPrimary: {
        color: "#000",
      },
    },
    MuiPickersClock: {
      pin: {
        backgroundColor: "#000",
      },
    },
    MuiPickersClockPointer: {
      pointer: {
        backgroundColor: "#000",
      },
      thumb: {
        backgroundColor: "#000",
        border: "14px solid #000",
      },
      noPoint: {
        backgroundColor: "#000",
      },
    },
    MuiPickersClockNumber: {
      clockNumberSelected: {
        backgroundColor: "#000",
      },
    },

    MuiPickerDTTabs: { tabs: { backgroundColor: "black" } },
    MuiPickersDay: {
      daySelected: {
        backgroundColor: "#000",
        color: "#fff",
        "&:hover": {
          backgroundColor: "#8E8E8E",
          color: "#FFF",
        },
      },
      dayDisabled: {
        color: "light-gray",
      },
      current: {
        color: "",
      },
    },
  },
})

Example #25

Source File: InlineDatePickerStyles.js From medha-STPC with GNU Affero General Public License v3.0

5 votes

customTheme = createMuiTheme({
  overrides: {
    MuiPickersToolbar: {
      toolbar: {
        backgroundColor: "black"
      }
    },
    MuiButton: {
      textPrimary: {
        color: "#000"
      }
    },
    MuiPickersDay: {
      daySelected: {
        backgroundColor: "#000",
        color: "#fff",
        "&:hover": {
          backgroundColor: "#8E8E8E",
          color: "#FFF"
        }
      },
      dayDisabled: {
        color: "light-gray"
      },
      current: {
        color: ""
      }
    },
    MuiOutlinedInput: {
      input: {
        padding: "17.5px 14px"
      }
    },
    MuiInputBase: {
      root: {
        fontSize: "14px"
      }
    },
    MuiSvgIcon: {
      root: {
        fontSize: "20px",
        paddingTop: "5px"
      }
    },
    MuiFormLabel: {
      root: {
        fontSize: "14px",
        color: "#263238"
      }
    },
    MuiFormControl: {
      root: {
        width: "100%"
      }
    }
  }
})

Example #26

Source File: theme.js From Portfolio with MIT License

5 votes

lightTheme = createMuiTheme(
  (theme && theme.light && Object.keys(theme.light).length > 0) ? theme.light :
  {
    palette: {
      type: "light"
    }
  }
)

Example #27

Source File: AudioHint.js From Screencast with MIT License

5 votes

muiTheme = createMuiTheme({})

Example #28

Source File: muiCustomTheme.js From social-media-strategy-fe with MIT License

5 votes

defaultTheme = createMuiTheme()

Example #29

Source File: muiCustomTheme.js From social-media-strategy-fe with MIT License

5 votes

theme = createMuiTheme({
	palette: {
		primary: {
			main: "#2196F3",
			light: "#a4caea",
			dark: "#0e64aa",
		},
		secondary: {
			main: "#E10050",
		},
		background: {
			default: "#FFFFFF",
			secondary: "#F6F6F6",
		},
	},
	navbar: {
		width: {
			open: Navbar.width.open,
			close: Navbar.width.close,
		},
		height: Navbar.height,
	},
	kanban: {
		topContainer: {
			height: "75px",
		},
		list: {
			header: {
				height: "70px",
			},
		},
	},
	overrides: {
		MuiDrawer: {
			paper: {
				top: 0,
				overflowX: "hidden",
				[defaultTheme.breakpoints.down("xs")]: {
					top: Navbar.height,
				},
			},
			modal: {
				zIndex: "1000 !important",
			},
		},
		MuiAppBar: {
			root: {
				boxShadow:
					"0px 0px 1px -1px rgba(0,0,0,0.2), 0px 0px 1px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12) !important",
			},
		},
		MuiButton: {
			root: {
				textTransform: "none",
				fontWeight: "600",
				minWidth: Navbar.width.close,
			},
		},
		MuiTypography: {
			h1: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
			h2: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
			h3: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
			h4: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
			h5: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
			h6: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
		},
	},
})