@material-ui/icons#Brightness4 JavaScript Examples

The following examples show how to use @material-ui/icons#Brightness4. 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: ThemeToggle.js    From personal-website-react with MIT License 6 votes vote down vote up 
ThemeToggle = () => {
    const { theme, toggleTheme } = useContext(ThemeContext);
    const classes = useStyles();

    return (
        <Tooltip
            title={"Toggle theme"}
            placement="right"
            TransitionComponent={Zoom}
        >
            <IconButton
                color="inherit"
                onClick={toggleTheme}
                aria-label={"Toggle theme"}
                className={classes.iconButton}
            >
                {theme === "light" ? (
                    <Brightness4 className={classes.icon} />
                ) : (
                    <Brightness7 className={classes.icon} />
                )}
            </IconButton>
        </Tooltip>
    );
}
Example #2
Source File: index.js    From Portfolio with MIT License 6 votes vote down vote up 
export default function Index({ projects, setTheme }) {

  const classes = useStyles()

  const trigger = useScrollTrigger({ disableHysteresis: true })

  const theme = useTheme()

  const toggleTheme = useCallback(() => {
    setTheme(theme => theme.palette.type === 'dark' ? lightTheme : darkTheme)
  }, [setTheme])

  return (
    <div className={classes.root}>
      <AppBar color={!trigger ? "transparent" : "inherit"} className={classes.appBar} position="fixed">
        <Toolbar>
          <Typography variant="h6" className={classes.root}>
            { name }
          </Typography>
          <IconButton edge="end" color="inherit" onClick={toggleTheme}>
            {theme.palette.type === "dark" ? <Brightness7/> : <Brightness4/>}
          </IconButton>
        </Toolbar>
      </AppBar>
      <Toolbar className={classes.toolbar} />
      <Container>
        <Landing />
        <Skills />
        <Projects data={projects}/>
        <Experience/>
        <About/>
      </Container>
    </div>
  );
}
Example #3
Source File: App.js    From gitlab-lint-react with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
App = () => {
  const classes = useStyles();
  const [state, dispatch] = useReducer(reducer, initialState, initializer);

  const theme = useMemo(
    () =>
      createMuiTheme({
        palette: {
          ...(state.mode === "light"
            ? {
                // light mode
                primary: {
                  main: gloBlue,
                },
                secondary: {
                  main: gloBlue,
                },
                primary1Color: gloBlue,
                type: state.mode,
              }
            : {
                // dark mode
                primary: {
                  main: "#07366E",
                },
                secondary: {
                  main: gloBlue,
                },
                background: {
                  default: "#020c18",
                  paper: "#05182E",
                },
                primary1Color: gloBlue,
                type: state.mode,
              }),
        },
        typography: {
          useNextVariants: true,
        },
      }),
    [state.mode]
  );

  useEffect(() => {
    localStorage.setItem("state", JSON.stringify(state));
  }, [state]);
  const [isMobile, setIsMobile] = React.useState(false);

  const handleToggleMenu = () => {
    setIsMobile((isMobile) => !isMobile);
  };

  function closeMenuOnScroll() {
    setIsMobile(false);
  }

  React.useEffect(() => {
    window.addEventListener("scroll", closeMenuOnScroll);

    return () => {
      window.removeEventListener("scroll", closeMenuOnScroll);
    };
  }, []);

  return (
    <Router>
      <MuiThemeProvider theme={theme}>
        <div className={classes.root}>
          <CssBaseline />
          <AppBar position="static" color="primary">
            <Container maxWidth="lg">
              <Toolbar className={classes.dFlex}>
                <IconButton
                  className={classes.IconButton}
                  onClick={() => dispatch({ type: "toggle" })}
                  color="inherit"
                >
                  {theme.palette.type === "dark" ? (
                    <Brightness4 />
                  ) : (
                    <Brightness7 />
                  )}
                </IconButton>
                <Typography
                  component="a"
                  color="inherit"
                  variant="h6"
                  className={classes.title}
                  href="/"
                >
                  gitlab-lint
                </Typography>

                <div
                  className={
                    isMobile ? classes.navLinksMobile : classes.navLinks
                  }
                  onClick={handleToggleMenu}
                >
                  <Button component={Link} color="inherit" to="/rules">
                    Rules
                  </Button>
                  <Button component={Link} color="inherit" to="/projects">
                    Projects
                  </Button>
                  <Button component={Link} color="inherit" to="/levels">
                    Levels
                  </Button>
                  <Button component={Link} color="inherit" to="/about">
                    About
                  </Button>
                </div>

                <button
                  className={classes.mobileMenuIcon}
                  onClick={handleToggleMenu}
                >
                  {isMobile ? <Close /> : <Menu />}
                </button>
              </Toolbar>
            </Container>
          </AppBar>
          <main className={classes.main}>
            <Container maxWidth="lg">
              <Switch>
                <Route exact path="/rules/:id">
                  <Rule />
                </Route>
                <Route exact path="/rules">
                  <Rules />
                </Route>
                <Route exact path="/projects/:id">
                  <Project />
                </Route>
                <Route exact path="/projects">
                  <Projects />
                </Route>
                <Route exact path="/levels">
                  <Levels />
                </Route>
                <Route exact path="/about">
                  <About />
                </Route>
                <Route exact path="/">
                  <Dashboard />
                </Route>
                <Route path={"*"} component={NotFound} />
              </Switch>
            </Container>
          </main>
        </div>
      </MuiThemeProvider>
    </Router>
  );
}