@material-ui/core/styles createTheme JavaScript Examples

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>
  );
}

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',
    },
  },
})

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>
  )
}

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',
    },
  },
})

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>
  );
}

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>
  );
}

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",
  },
})

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',
      },
    },
  }))

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',
      },
    },
  }))

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(","),
    },
  },
})

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(","),
    },
  },
})

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

5 votes

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

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: {},
})

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

5 votes

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

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

5 votes

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

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

5 votes

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

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>
}

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>
  )
}

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

5 votes

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

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

5 votes

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

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

5 votes

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

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'
      }
    },
  }
})

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'
      }
    },
  }
})