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

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

6 votes

export default function ThemeConfig({ children }) {
  const themeOptions = useMemo(
    () => ({
      palette,
      shape,
      typography,
      breakpoints,
      shadows,
      customShadows
    }),
    []
  );

  const theme = createTheme(themeOptions);
  theme.components = componentsOverride(theme);

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <GlobalStyles />
        {children}
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

Example #2

Source File: theme.js From techno-broadlink with MIT License

6 votes

theme = createTheme({
  palette: {
    primary: {
      main: '#051a1f',
    },
    secondary: {
      main: '#0398b6',
    },
    error: {
      main: '#E73023',
    },
    success: {
      main: '#4BAF4B',
    },
  },
})

Example #3

Source File: AppThemeProvider.jsx From covid with GNU General Public License v3.0

6 votes

AppThemeProvider = (props) => {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
  const { type, children } = props

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          type: type || (prefersDarkMode ? 'dark' : 'light')
        }
      }),
    [prefersDarkMode, type]
  )

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  )
}

Example #4

Source File: theme.js From webpage with MIT License

6 votes

theme = createTheme({
  palette: {
    primary: {
      main: '#1b2bd1',
    },
//    secondary: {
//      main: '#494b52',
//    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
})

Example #5

Source File: ThemeContextProvider.js From react-sample-projects with MIT License

6 votes

ThemeContextProvider = ({ children }) => {
  const [isDark, setDarkMode] = useState(
    window.matchMedia('(prefers-color-scheme: dark)').matches,
  );
  const theme = createTheme(isDark ? dark : light);
  const toggleTheme = () => {
    setDarkMode(() => !isDark);
  };

  return (
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </ThemeContext.Provider>
  );
}

Example #6

Source File: App.js From whaticket with MIT License

6 votes

App = () => {
  const [locale, setLocale] = useState();

  const theme = createTheme(
    {
      scrollbarStyles: {
        "&::-webkit-scrollbar": {
          width: "8px",
          height: "8px",
        },
        "&::-webkit-scrollbar-thumb": {
          boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
          backgroundColor: "#e8e8e8",
        },
      },
      palette: {
        primary: { main: "#2576d2" },
      },
    },
    locale
  );

  useEffect(() => {
    const i18nlocale = localStorage.getItem("i18nextLng");
    const browserLocale =
      i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);

    if (browserLocale === "ptBR") {
      setLocale(ptBR);
    }
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  );
}

Example #7

Source File: App.jsx From hr-atx58-fec-havarti with Mozilla Public License 2.0

6 votes

theme = createTheme({
  pallette: {
    primary: {
      main: "2FC3A8",
    },
    secondary: {
      main: "2FB1C3",
    },
  },
  typography: {
    fontFamily: "Roboto",
  },
})

Example #8

Source File: theme.js From dscbppimt-official-website with MIT License

6 votes

lightTheme = responsiveFontSizes(createTheme({
    typography: {...typography},
    palette: {
      type : 'light',
      primary: {
        main: '#1FA9E5',
      },
      secondary : {
        main : '#fff',
      },
    },
  }))

Example #9

Source File: theme.js From dscbppimt-official-website with MIT License

6 votes

darkTheme = responsiveFontSizes(createTheme({
    typography: {...typography},
    palette: {
      type : 'dark',
      primary: {
        main: '#1FA9E5',
      },
      secondary : {
        main : '#000',
      },
    },
  }))

Example #10

Source File: dark.js From 8086-emulator-web with Apache License 2.0

6 votes

theme = createTheme({
  palette: {
    type: "dark",
    primary: {
      main: "#F4C430",
      light: "rgb(255, 197, 112)",
      dark: "rgb(200, 147, 89)",
      contrastText: "rgba(0, 0, 0, 0.87)",
    },
    secondary: {
      main: "#101010",
      contrastText: "#FCFDFA",
    },
    background: {
      paper: "#424242",
      default: "#303030",
    },
    error: {
      main: red.A400,
    },
  },
  typography: {
    fontFamily: ["JetBrains Mono", "Roboto", "Arial", "sans-serif"].join(","),
    button: {
      fontFamily: ["JetBrains Mono", "Roboto", "Arial", "sans-serif"].join(","),
    },
  },
})

Example #11

Source File: normal.js From 8086-emulator-web with Apache License 2.0

6 votes

theme = createTheme({
  palette: {
    primary: {
      main: "#F4C430",
    },
    secondary: {
      main: "#fff",
      contrastText: "#0f0f0f",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#FCFCFC",
      paper: "#FCFCFC",
    },
    titleBar: {
      main: "#FCFCFC",
      contrastText: "#0f0f0f",
    },
  },
  typography: {
    fontFamily: ["JetBrains Mono", "Roboto", "Arial", "sans-serif"].join(","),
    button: {
      fontFamily: ["JetBrains Mono", "Roboto", "Arial", "sans-serif"].join(","),
    },
  },
})

Example #12

Source File: theme.js From Edlib with GNU General Public License v3.0

5 votes

theme = createTheme({
    typography: {
        htmlFontSize: 10,
    },
})

Example #13

Source File: theme.js From Webiu with MIT License

5 votes

theme = createTheme({
  palette: {
    primary: {
      main: verdigris,
      light: lightText,
      dark: darkText,
    },
    secondary: {
      main: lightVerdigris,
    },
    common: {
      grey: greyText,
      oldlace: cardOldLace,
    },
  },
  typography: {
    h1: {
      fontSize: 32,
      fontFamily: "Inter",
      fontStyle: "italic",
      fontWeight: "bold",
      color: darkText,
    },
    h2: {
      fontSize: 24,
      fontFamily: "Inter",
      color: lightText,
      fontWeight: "bold",
    },
    h3: {
      fontSize: 24,
      fontFamily: "Inter",
      color: darkText,
      fontWeight: "bold",
    },
    h4: {
      fontSize: 20,
      fontFamily: "Inter",
      color: lightText,
    },
    h5: {
      fontSize: 15,
      fontFamily: "Inter",
      color: darkText,
      fontWeight: "bold",
    },
    body1: {
      fontSize: 20,
      fontFamily: "Inter",
      color: darkText,
    },
  },
  overrides: {},
})

Example #14

Source File: themes.js From Codelabz with Apache License 2.0

5 votes

theme = createTheme({
  palette: {
    primary: {
      main: "#03AAFA",
    },
  },
})

Example #15

Source File: themes.js From Codelabz with Apache License 2.0

5 votes

basicTheme = createTheme({
  shadows: ["none"],
  palette: {
    primary: {
      main: "#455a64",
    },
  },
})

Example #16

Source File: theme.js From radio-logger with GNU General Public License v3.0

5 votes

theme = createTheme({
  palette: {
    type: 'dark'
  }
})

Example #17

Source File: preview.js From eosio-components with MIT License

5 votes

providerFn = ({ theme, children }) => {
  const muTheme = createTheme(theme)

  return <ThemeProvider theme={muTheme}>{children}</ThemeProvider>
}

Example #18

Source File: Dashboard.jsx From covid with GNU General Public License v3.0

5 votes

Dashboard = (props) => {
  const classes = useStyles()
  const { children, theme, t, ...restProps } = props
  const [open, setOpen] = React.useState(false)

  const handleDrawerOpen = () => {
    setOpen(true)
  }
  const handleDrawerClose = () => {
    setOpen(false)
  }
  const shouldShowUpdateBadge =
    useMediaQuery(createTheme().breakpoints.down('md')) &&
    props.newServiceWorkerDetected

  return (
    <AppThemeProvider type={theme}>
      <ModalRouterWithRoutes routeProps={props} />
      <div id='root' className={classes.root}>
        <AppBar
          position='absolute'
          className={clsx(classes.appBar, open && classes.appBarShift)}
        >
          <Toolbar className={classes.toolbar}>
            <IconButton
              edge='start'
              color='inherit'
              aria-label='open menu'
              data-testid='open-menu'
              onClick={handleDrawerOpen}
              className={clsx(
                classes.menuButton,
                open && classes.menuButtonHidden
              )}
            >
              <Badge
                badgeContent={1}
                color='secondary'
                invisible={!shouldShowUpdateBadge}
              >
                <MenuIcon />
              </Badge>
            </IconButton>
            <Typography
              component='h1'
              variant='h6'
              color='inherit'
              noWrap
              className={classes.title}
            >
              {t('Covid Data')} <code>{t('Refactored')}</code>
            </Typography>
            {/*
            <IconButton color="inherit">
              <Badge badgeContent={4} color="secondary">
                <NotificationsIcon />
              </Badge>
            </IconButton>
            */}
          </Toolbar>
        </AppBar>
        <Menu
          {...{ handleDrawerOpen, handleDrawerClose, open }}
          {...restProps}
        />
        <main className={classes.content}>
          {children}
          <Container maxWidth='lg' className={classes.container}>
            <Box pt={4}>
              <Copyright />
            </Box>
          </Container>
        </main>
      </div>
    </AppThemeProvider>
  )
}

Example #19

Source File: index.jsx From simplQ-frontend with GNU General Public License v3.0

5 votes

theme = createTheme({
  palette: {
    primary: {
      main: '#3A3768',
    },
  },
})

Example #20

Source File: index.js From crypto-red.github.io with MIT License

5 votes

lightTheme = createTheme({
    palette: lightPalette,
    overrides,
    typography
})

Example #21

Source File: index.js From crypto-red.github.io with MIT License

5 votes

darkTheme = createTheme({
    palette: darkPalette,
    overrides,
    typography
})

Example #22

Source File: light.js From vote-incentives with GNU General Public License v3.0

5 votes

theme = createTheme({
  ...coreTheme,
  palette: {
    ...coreTheme.palette,
    background: {
      default: '#fff',
      paper: '#fff'
    },
    primary: {
      main: '#0053FF',
    },
    secondary: {
      main: '#FFFFFF'
    },
    text: {
      primary: 'rgba(0, 0, 0, 0.87)',
      secondary: 'rgba(0, 0, 0, 0.30)',
    },
    type: 'light',
  },
  overrides: {
    ...coreTheme.overrides,
    MuiButton: {
      ...coreTheme.overrides.MuiButton,
      outlined: {
        color: '#fff',
        borderColor: '#fff',
        borderRadius: '32px'
      },
      outlinedPrimary: {
        border: '1px solid #EAEAEA',
        "&:hover": {
          backgroundColor: '#0053FF !important',
          color: '#fff'
        }
      }, 
      contained: {
        ...coreTheme.overrides.MuiButton.contained,
        backgroundColor: '#fff'
      }
    },
    MuiInputBase: {
      ...coreTheme.overrides.MuiInputBase,
      root: {
        background: "#fff"
      }
    },
    MuiOutlinedInput: {
      ...coreTheme.overrides.MuiOutlinedInput,
      notchedOutline: {
        borderWidth: "2px"
      }
    },
    MuiSnackbarContent: {
      root: {
        color: 'rgba(0, 0, 0, 0.87)',
        backgroundColor: '#F8F9FE',
        padding: '0px',
        minWidth: 'auto',
        '@media (min-width: 960px)': {
          minWidth: '500px',
        }
      },
      message: {
        padding: '0px'
      },
      action: {
        marginRight: '0px'
      }
    },
  }
})

Example #23

Source File: dark.js From vote-incentives with GNU General Public License v3.0

5 votes

theme = createTheme({
  ...coreTheme,
  palette: {
    ...coreTheme.palette,
    background: {
      default: '#141C2F',
      paper: '#1C253C'
    },
    primary: {
      main: '#2F80ED',
    },
    secondary: {
      main: '#141C2F'
    },
    type: 'dark',
  },
  overrides: {
    ...coreTheme.overrides,
    MuiButton: {
      ...coreTheme.overrides.MuiButton,
      outlinedPrimary: {
        border: '1px solid #FFFFFF1A',
        "&:hover": {
          backgroundColor: '#2F80ED !important',
          color: '#fff'
        }
      }
    },
    MuiInputBase: {
      ...coreTheme.overrides.MuiInputBase,
      root: {
        background: "#141C2F"
      }
    },
    MuiOutlinedInput: {
      ...coreTheme.overrides.MuiOutlinedInput,
      notchedOutline: {
        borderColor: "#31394F"
      }
    },
    MuiSnackbarContent: {
      root: {
        color: '#fff',
        backgroundColor: '#2B2E3C',
        padding: '0px',
        minWidth: 'auto',
        '@media (min-width: 960px)': {
          minWidth: '500px',
        }
      },
      message: {
        padding: '0px'
      },
      action: {
        marginRight: '0px'
      }
    },
  }
})

Example #24