theme-ui#useColorMode JavaScript Examples

ColorModeToggle = (props) => {
  const [mode, setMode] = useColorMode();
  return (
    <Flex
      sx={{ mt: 'auto', alignItems: 'center', cursor: 'pointer' }}
      onClick={(e) => {
        const next = mode === 'dark' ? 'light' : 'dark';
        setMode(next);
      }}
    >
      <Icon name={'moon'} color="text" size="auto" sx={{ height: 20, width: 20 }} />
      <Text variant="plainText" sx={{ fontSize: 3, pl: 2 }}>
        Color Mode
      </Text>
    </Flex>
  );
}

GitHub = () => {
  const [colorMode,] = useColorMode()

  return (
    <Image
      src={colorMode === 'light' ? Logo : LogoLight}
      sx={{
        height: "24px",
      }}
    />
  )
}

Logo = () => {
  const config = useConfig();
  const [colorMode] = useColorMode();
  const {width = '100%', src = ''} = config.themeConfig.logo || {};
  const len = (config.title || '').length;

  const imagePath = typeof src === 'object' ? src[colorMode] : src;

  return (
    <div sx={styles.logo} data-testid="logo">
      <Link to="/" sx={styles.link}>
        <Flex
          sx={{alignItems: 'center', flexDirection: 'row', lineHeight: 1.2}}
        >
          {imagePath ? (
            <Image
              className="logo"
              src={getPublicUrl(config.base, imagePath)}
              width={width}
              height="auto"
              alt={config.title}
            />
          ) : null}
          <span className={len > 12 && imagePath ? 'h-sm' : ''}>
            {config.title}
          </span>
        </Flex>
      </Link>
    </div>
  );
}

Logo = () => {
  const [colorMode] = useColorMode();

  const logoUrl = () => {
    if (colorMode === 'dark') {
        return <a href="#"><img style={{width: '50%'}} src={logoDark}/></a>;
    } else {
        return <a href="#"><img style={{width: '50%'}} src={logoNormal} /></a>
    }
  }

  return (
    logoUrl()
  )
}

Header = props => {
  const { onOpen } = props
  const {
    repository,
    themeConfig: { showDarkModeSwitch, showMarkdownEditButton },
  } = useConfig()
  const { edit = true, ...doc } = useCurrentDoc()
  const [colorMode, setColorMode] = useColorMode()

  const toggleColorMode = () => {
    setColorMode(colorMode === 'light' ? 'dark' : 'light')
  }

  return (
    <div sx={styles.wrapper} data-testid="header">
      <Container>
        <Box sx={styles.menuIcon}>
          <button sx={styles.menuButton} onClick={onOpen}>
            <Menu size={25} />
          </button>
        </Box>
        <div sx={styles.innerContainer}>
          <Logo />
          <Flex>
            {repository && (
              <Box sx={{ mr: 2 }}>
                <a
                  href={repository}
                  sx={styles.headerButton}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <Github size={15} />
                </a>
              </Box>
            )}
            {showDarkModeSwitch && (
              <button
                sx={styles.headerButton}
                onClick={toggleColorMode}
                aria-label={`Switch to ${colorMode} mode`}
              >
                <Sun size={15} />
              </button>
            )}
          </Flex>
          {showMarkdownEditButton && edit && doc.link && (
            <a
              sx={styles.editButton}
              href={doc.link}
              target="_blank"
              rel="noopener noreferrer"
            >
              <Edit width={14} />
              <Box sx={{ pl: 2 }}>Edit page</Box>
            </a>
          )}
        </div>
      </Container>
    </div>
  )
}

export default function ColorModeToggler () {
  const [, setColorMode] = useColorMode()

  function checkLocalStorage (currentTheme, toggleTheme) {
    //check that theme local storage values are set correctly
    if (!isBrowser) {
      return currentTheme;
    }
    let themeUiColorMode = window.localStorage.getItem('theme-ui-color-mode');
    let theme = window.localStorage.getItem('theme')
    if (!themeUiColorMode) {
      themeUiColorMode = theme || currentTheme
      window.localStorage.setItem('theme-ui-color-mode', themeUiColorMode);
      setColorMode(themeUiColorMode);
    }
    if (!theme) {
      theme = themeUiColorMode || currentTheme
      window.localStorage.setItem('theme', theme);
      toggleTheme(theme)
    }

    return theme || themeUiColorMode || currentTheme;
  }
  
  return (
    <ThemeToggler>
        {({ theme, toggleTheme }) => {
          const currentTheme = checkLocalStorage(theme, toggleTheme);
          return (
            <button onClick={() => {
              const mode = currentTheme === 'dark' ? 'light' : 'dark';
              toggleTheme(mode);
              setColorMode(mode);
            }} className="dark-mode-toggler">
              {currentTheme === "light" && <LightMode />}
              {currentTheme === "dark" && <DarkMode />}
            </button>
          );
        }}
    </ThemeToggler>
  )
}

Sidebar = ({ data, api }) => {
  const [scrollPos, setScrollPos] = useState(0)
  const [colorMode,] = useColorMode()

  useEffect(() => {
    const nav = document.querySelector("#nav")

    const handleScroll = e => {
      const pos = e.srcElement.scrollTop / 50
      if (pos < 1) {
        setScrollPos(pos)
      }
    }
    nav.addEventListener("scroll", handleScroll)
    return () => nav.removeEventListener("scroll", handleScroll)
  }, [])

  return (
    <SideBarContainer
      sx={{
        position: "sticky",
        top: "0",
        bottom: "0",
        height: "100vh",
        backgroundColor: "var(--theme-ui-colors-background)",
        boxShadow: "sidebarShadow",
        minWidth: "var(--side-bar-width)",
        flexDirection: "column",
      }}
      className="sidebar-container"
    >
      <Flex
        sx={{
          px: "4",
          pt: "3",
          background: "var(--theme-ui-colors-background)",
          width: "calc(var(--side-bar-width) - 1px)",
          flexDirection: "column",
        }}
      >
        <Flex>
          <Image
            src={colorMode === 'light' ? Logo : LogoDark}
            alt="Medusa logo"
            onClick={() => navigate("/")}
            sx={{
              height: "32px",
              cursor: "pointer",
            }}
          />
        </Flex>
        <Flex py={4}>
          <SideBarSelector api={api} />
        </Flex>
      </Flex>
      <Flex
        id="nav"
        sx={{
          flex: 1,
          position: "relative",
          px: "3",
          pb: "3",
          mr: "1px",
          flexDirection: "column",
          overflowY: "scroll",
          pr: "6px",
          scrollbarColor: "faded light",
        }}
      >
        <SideBarFade opacity={scrollPos} />
        {data.sections.map((s, i) => {
          return <SideBarItem item={s} key={i} />
        })}
      </Flex>
    </SideBarContainer>
  )
}

Header = ({ isShowSearch, searchCompProps, toggleModal }) => {
  const [colorMode, setColorMode] = useColorMode()
  return (
    <Box
      sx={{
        borderBottom: "1px solid",
        borderColor: 'cardBorder',
        marginBottom: '24px'
      }}>
      <Flex
        as="header"
        sx={{
          height: '120px',
          alignItems: 'center',
          justifyContent: 'space-between',
          margin: '0 auto',
          maxWidth: ['100%', '768px', '992px', '1400px'],
          px: '15px',
        }}
      >
        <Flex
          sx={{
            flex: 1,
            alignItems: 'center',
          }}
        >
          <Text
            sx={{
              fontSize: '24px',
              color: 'white',
              fontFamily: 'inter',
              textAlign: 'center',
            }}
          >
            <Link to="/" style={{ display: 'block', lineHeight: 0 }} >
              <Image style={{ fill: '#FF4136', width: 180 }} src={colorMode === 'dark' ? logoWhite : logoBlack} />
            </Link>
          </Text>
          { isShowSearch &&
            <Box
              sx={{
                width: '76%',
                margin: '16px 16px 0px 16px',
                '@media only screen and (max-width: 916px)': {
                  marginTop: 0,
                  width: 'auto',
                  display: 'flex',
                  justifyContent: 'flex-end',
                  margin: '0px 16px 0px auto',
                },
                '@media only screen and (max-width: 320px)': {
                  margin: '0px 6px',
                },
              }}
            >
              <Box
                sx={{
                  '@media only screen and (max-width: 916px)': {
                    display: 'none',
                  },
                }}
              >
                <Search {...searchCompProps}/>
              </Box>
              <Button
                name="toggle-modal-with-search"
                onClick={toggleModal}
                backgroundColor="rgb(157, 31, 30)"
                sx={{
                  padding: '6px 12px',
                  '@media only screen and (min-width: 916px)': {
                    display: 'none',
                  },
                }}
              >
                <SearchIcon
                  style={{
                    width: 16,
                    height: 16,
                  }}
                />
              </Button>
            </Box>
          }
        </Flex>
        <Flex
          sx={{
            alignItems: 'center',
            justifyContent: 'space-between',
            '@media only screen and (min-width: 916px)': {
              marginBottom: 9,
            },
          }}
        >
          <Link to="/about">
            <Text
              sx={{
                fontSize: '16px',
                color: 'text',
                fontFamily: 'inter',
                textAlign: 'center',
                mr: '1em'
              }}
            >
              About
          </Text>
          </Link>
          <a href="https://github.com/luisFilipePT/github-covid-finder" target="_blank" rel="noopener noreferrer">
            <Text sx={{color: 'text', marginTop: '4px'}}>
              <GithubIcon />
            </Text>
          </a>
          <Button sx={{
            fontFamily: 'inter',
            marginLeft: '24px',
            cursor: 'pointer'
          }} 
          variant='selectTheme'
          onClick={e => {
            setColorMode(colorMode === 'default' ? 'dark' : 'default')
          }}>
            {colorMode === 'default' ? 'Dark' : 'Light'}
          </Button>
        </Flex>
      </Flex>
    </Box>
  )
}

Index = () => {
  const refSearch = useRef(null)
  const [repos, setRepos] = useState(null)
  const [totalResults, setTotalResults] = useState(null)
  const [isFetchingData, setIsFetchingData] = useState(true)
  const [isShowModal, setIsShowModal] = useState(false)
  const [searchState, dispatch] = useReducer(reducer, INITIAL_STATE)
  const previousSearchState = usePrevious({ ...searchState })
  const [colorMode, _setColorMode] = useColorMode()

  useEffect(() => {
    const fetchDataAndSetState = async () => {
      const data = await fetchData(searchState)

      if (data) {
        setRepos(data)
        setTotalResults(data.total_count)
      }

      setIsFetchingData(false)
    }

    // Avoid request while developing
    if (process.env.NODE_ENV === 'development') {
      setRepos(mockRepos)
      setIsFetchingData(false)
      return
    }

    fetchDataAndSetState()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchState])

  const onSearchChange = field => e => {
    if (searchState.page * 30 < totalResults && field === 'pageUp') {
      scrollTo('#wrapper')
      dispatch({ type: field, payload: searchState.page + 1 })
      return
    }

    if (searchState.page > 1 && field === 'pageDown') {
      scrollTo('#wrapper')
      dispatch({ type: field, payload: searchState.page - 1 })
      return
    }
  }

  const onSearchIconClick = async (input, stars, language) => {
    dispatch({ type: 'search', payload: input })
    dispatch({ type: 'sort', payload: stars })
    dispatch({ type: 'filter', payload: language })

    if (
      previousSearchState.term === searchState.term &&
      previousSearchState.sort === searchState.sort &&
      previousSearchState.filter === searchState.filter
    ) {
      return
    }

    setIsFetchingData(true)

    if (isShowModal) {
      setIsShowModal(false)
    }

    const data = await fetchData(searchState)

    if (data) {
      setRepos(data)
      setTotalResults(data.total_count)
    }

    setIsFetchingData(false)
  }

  const toggleModal = () => {
    setIsShowModal(!isShowModal)
  }

  const searchCompProps = {
    searchState,
    onSearchIconClick,
    onSortChange: onSearchChange('sort'),
    onSearchChange: onSearchChange('search'),
    onFilterChange: onSearchChange('filter'),
  }

  return (
    <>
      <Layout
        isShowSearch
        isShowModal={isShowModal}
        toggleModal={toggleModal}
        searchCompProps={searchCompProps}
      >
        <SEO />
        <span id="wrapper" ref={refSearch} />
        {isFetchingData ? (
          <Spinner
            color="rgb(255, 65, 54)"
            sx={{
              top: '50%',
              left: '50%',
              position: 'absolute',
              transform: 'translate(-50%, -50%)',
            }}
          />
        ) : repos.items.length > 0 ? (
          <>
            <Grid columns={[1, 1, 1, 3]}>
              {repos.items.map(repo => (
                <RepoCard key={repo.id} repo={repo} />
              ))}
            </Grid>
            <Pagination
              pageUp={onSearchChange('pageUp')}
              pageDown={onSearchChange('pageDown')}
              currentPage={searchState.page}
              totalResults={totalResults}
            />
          </>
        ) : (
          <Box
            sx={{
              top: '50%',
              left: '50%',
              position: 'absolute',
              transform: 'translate(-50%, -50%)',
            }}
          >
            <Text
              sx={{
                fontSize: 22,
                fontFamily: 'inter',
              }}
            >
              No result found
            </Text>
          </Box>
        )}
      </Layout>
      <Flex id="modal" className={isShowModal ? 'active' : null}>
        <Flex
          p="16px"
          bg={
            colorMode === 'dark'
              ? 'rgba(64,64,64,0.9)'
              : 'rgba(255,255,255,0.7)'
          }
          sx={{
            maxWidth: 660,
            margin: 'auto',
            borderRadius: 6,
            alignItems: 'flex-end',
            flexDirection: 'column',
            '@media only screen and (max-width: 425px)': {
              width: 360,
            },
            '@media only screen and (max-width: 320px)': {
              width: 300,
            },
          }}
        >
          <Search {...searchCompProps} />
          <Button
            mt="8px"
            backgroundColor="rgb(186, 65, 54)"
            onClick={toggleModal}
            sx={{
              fontFamily: 'inter',
            }}
          >
            Close
          </Button>
        </Flex>
      </Flex>
    </>
  )
}

Header = ({onOpen}) => {
  const {
    repository,
    themeConfig: {
      showDarkModeSwitch,
      showMarkdownEditButton,
      search,
      header: {fixed, icons} = {},
    },
  } = useConfig();
  const {edit = true, ...doc} = useCurrentDoc();
  const [colorMode, setColorMode] = useColorMode();
  const [drawerOpen, setDrawerOpen] = useState(false);

  const toggleColorMode = () => {
    setColorMode(colorMode === 'light' ? 'dark' : 'light');
  };

  const toggleSearch = (val) => {
    setDrawerOpen((prev) => (val !== undefined ? !!val : !prev));
  };

  const ui = (
    <Container sx={styles.wrapper} data-testid="header">
      <Box className="menu-icon" sx={styles.menuIcon}>
        <button sx={styles.menuButton} onClick={onOpen}>
          <Menu size={25} />
        </button>
      </Box>
      <InnerContainer sx={styles.innerContainer}>
        <Logo />
        <Flex>
          {repository && (
            <Box sx={{mr: 2}}>
              <a
                className={`${icons} icon`}
                href={repository}
                sx={styles.headerButton}
                target="_blank"
                rel="noopener noreferrer"
              >
                <Github size={15} />
              </a>
            </Box>
          )}
          {showDarkModeSwitch && (
            <Box sx={{mr: 2}}>
              <button
                className={`${icons} icon`}
                sx={styles.headerButton}
                onClick={toggleColorMode}
                aria-label={`Switch to ${colorMode} mode`}
              >
                <Sun size={15} />
              </button>
            </Box>
          )}
          {search && (
            <Box>
              <button
                className={`${icons} icon`}
                sx={styles.headerButton}
                onClick={toggleSearch}
                aria-label={`Search`}
              >
                <Search size={15} />
              </button>
              <SearchDrawer open={drawerOpen} toggleOpen={toggleSearch} />
            </Box>
          )}
        </Flex>
        {showMarkdownEditButton && edit && doc.link && (
          <a
            className="h-o"
            sx={styles.editButton}
            href={doc.link}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Edit width={14} />
            <Box sx={{pl: 2}}>Edit page</Box>
          </a>
        )}
      </InnerContainer>
    </Container>
  );

  return fixed ? <FixedHeader>{ui}</FixedHeader> : ui;
}