@chakra-ui/core#useColorModeValue JavaScript Examples

The following examples show how to use @chakra-ui/core#useColorModeValue. 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 youtube with MIT License 6 votes vote down vote up 
export default function Home() {
  const color = useColorModeValue("red.500", "white")
  return (
    <Stack
      as="main"
      align="center"
    >
      <Flex
        flexDirection="column"
        maxWidth="700px"
      >
        <Flex
          direction="row"
          w="700px"
          pt={4}
          justify="space-between"
        >
          <DarkModeSwitch />
          <Text color={color}>Home</Text>
        </Flex>
        <Heading
          as="h1"
          size="2xl"
          fontWeight="bold"
        >
          Hello, World!
        </Heading>
        <Text my={4}>Hello, again</Text>
      </Flex>
    </Stack>
  )
}
Example #2
Source File: dashboard.js    From dashboard with MIT License 6 votes vote down vote up 
export default function Dashboard({ children }) {
  const bgColor = useColorModeValue('white', 'gray.800');

  return (
    <>
      <Header />
      <Sidebar display={['none', null, 'flex']} w={64} />

      <Flex as="main" ml={[0, 0, 64]} bg={bgColor}>
        <Flex direction="column" w="full">
          <Box
            w="full"
            as="section"
            px={[4, 6, 8]}
            py={4}
            mt={16}
            h="calc(100vh - 4rem)"
          >
            {children}
          </Box>
        </Flex>
      </Flex>
    </>
  );
}
Example #3
Source File: header.js    From dashboard with MIT License 6 votes vote down vote up 
export default function Header() {
  const bgColor = useColorModeValue('white', 'gray.800');

  return (
    <Flex
      as="header"
      position="fixed"
      top={0}
      left={[0, 0, 64]}
      right={0}
      align="center"
      h={16}
      px={[4, 6, 8]}
      bg={bgColor}
      zIndex="docked"
    >
      <Flex w="full" align="center" justify="center">
        <Flex w="full" align="center" justify="space-between">
          <Flex align="center">
            <NextLink href="/dashboard" passHref>
              <Button as="a" variant="ghost" px={0} fontWeight="bold">
                {MY_APP}
              </Button>
            </NextLink>
          </Flex>
          <Flex>
            <ThemeToggle mr={`-${3}`} />
            <MobileNav />
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}
Example #4
Source File: nav-link.js    From dashboard with MIT License 6 votes vote down vote up 
A = forwardRef(({ children, icon, ...props }, ref) => {
  const color = useColorModeValue('gray.500', 'gray.300');

  return (
    <Flex
      ref={ref}
      as="a"
      w="full"
      align="center"
      cursor="pointer"
      px={3}
      py={2}
      fontWeight="medium"
      color={color}
      borderRadius="md"
      outline="none"
      _focus={{ shadow: 'outline' }}
      _notFirst={{ mt: 1 }}
      {...props}
    >
      {icon && cloneElement(icon, { mr: 3 })}
      <Box w="full">{children}</Box>
    </Flex>
  );
})
Example #5
Source File: nav-link.js    From dashboard with MIT License 6 votes vote down vote up 
NavLink = forwardRef(({ href, ...props }, ref) => {
  const hoverColor = useColorModeValue('gray.900', 'white');
  const hoverBg = useColorModeValue('gray.100', 'gray.700');
  const activeColor = useColorModeValue('gray.600', 'teal.200');
  const activeBg = useColorModeValue('gray.100', 'gray.900');

  return (
    <InternalLink href={href}>
      {(isActive) => (
        <A
          ref={ref}
          aria-current={isActive ? 'page' : undefined}
          _hover={{
            color: hoverColor,
            bg: hoverBg
          }}
          {...(isActive && {
            bg: activeBg,
            color: activeColor,
            _hover: {}
          })}
          {...props}
        />
      )}
    </InternalLink>
  );
})
Example #6
Source File: sidebar.js    From dashboard with MIT License 6 votes vote down vote up 
export default function Sidebar(props) {
  const bgColor = useColorModeValue('white', 'gray.800');

  return (
    <SidebarContainer bg={bgColor}>
      <Flex w="full" align="center" h={16} p={3}>
        <Flex boxSize="full" align="center" px={3}>
          <Flex boxSize="full" align="center">
            <Box
              as={LogoMark}
              h={8}
              w="auto"
              display={{ base: 'block', lg: 'none' }}
            />

            <Box
              as={LogoOnDark}
              h={8}
              w="auto"
              display={{ base: 'none', lg: 'block' }}
            />
          </Flex>
        </Flex>
      </Flex>
      <VStack
        as="nav"
        aria-label="Main navigation"
        position="relative"
        h="calc(100vh - 4rem)"
        p={3}
        overflowY="auto"
        {...props}
      >
        <PageLinks />
      </VStack>
    </SidebarContainer>
  );
}
Example #7
Source File: footer.js    From dashboard with MIT License 6 votes vote down vote up 
export default function Footer() {
  const color = useColorModeValue('gray.900', 'gray.200');
  const bgColor = useColorModeValue('gray.200', 'gray.500');

  return (
    <Stack direction="row" as="footer" mt={12} justify="center">
      {links.map(([icon, route, title]) => (
        <Link
          href={route}
          key={route}
          isExternal
          title={title}
          color={color}
          borderRadius="lg"
          p={2}
          _hover={{ bg: bgColor }}
        >
          <Box as={icon} boxSize={6} />
        </Link>
      ))}
    </Stack>
  );
}
Example #8
Source File: header.js    From dashboard with MIT License 6 votes vote down vote up 
export default function Header() {
  const bgColor = useColorModeValue('white', 'gray.900');

  return (
    <Flex
      pos="fixed"
      as="header"
      align="center"
      justify="center"
      top={0}
      insetX={0}
      h={16}
      px={[4, 6, null, 8]}
      bg={bgColor}
      borderBottomWidth="1px"
    >
      <Flex w="full" align="center" justify="center">
        <Flex w="full" maxW="5xl" align="center" justify="center">
          <Flex w="full" align="center" justify="space-between">
            <Flex align="center">
              <NextLink href="/" passHref>
                <Button as="a" variant="ghost" px={0} fontWeight="bold">
                  {MY_APP}
                </Button>
              </NextLink>
            </Flex>
            <Flex>
              <ThemeToggle />
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}
Example #9
Source File: logo-on-dark.js    From dashboard with MIT License 6 votes vote down vote up 
LogoOnDark = (props) => {
  const textColor = useColorModeValue('#161e2e', 'white');

  return (
    <Box as="svg" fill="none" viewBox="0 0 143 32" {...props}>
      <path
        fill="#6875F5"
        d="M15.258 26.865a4.043 4.043 0 01-1.133 2.917A4.006 4.006 0 0111.253 31a3.992 3.992 0 01-2.872-1.218 4.028 4.028 0 01-1.133-2.917c.009-.698.2-1.382.557-1.981.356-.6.863-1.094 1.47-1.433-.024.109.09-.055 0 0l1.86-1.652a8.495 8.495 0 002.304-5.793c0-2.926-1.711-5.901-4.17-7.457.094.055-.036-.094 0 0A3.952 3.952 0 017.8 7.116a3.975 3.975 0 01-.557-1.98 4.042 4.042 0 011.133-2.918A4.006 4.006 0 0111.247 1a3.99 3.99 0 012.872 1.218 4.025 4.025 0 011.133 2.917 8.521 8.521 0 002.347 5.832l.817.8c.326.285.668.551 1.024.798.621.33 1.142.826 1.504 1.431a3.902 3.902 0 01-1.504 5.442c.033-.067-.063.036 0 0a8.968 8.968 0 00-3.024 3.183 9.016 9.016 0 00-1.158 4.244zM19.741 5.123c0 .796.235 1.575.676 2.237a4.01 4.01 0 001.798 1.482 3.99 3.99 0 004.366-.873 4.042 4.042 0 00.869-4.386 4.02 4.02 0 00-1.476-1.806 3.994 3.994 0 00-5.058.501 4.038 4.038 0 00-1.175 2.845zM23.748 22.84c-.792 0-1.567.236-2.226.678a4.021 4.021 0 00-1.476 1.806 4.042 4.042 0 00.869 4.387 3.99 3.99 0 004.366.873A4.01 4.01 0 0027.08 29.1a4.039 4.039 0 00-.5-5.082 4 4 0 00-2.832-1.18zM34 15.994c0-.796-.235-1.574-.675-2.236a4.01 4.01 0 00-1.798-1.483 3.99 3.99 0 00-4.367.873 4.042 4.042 0 00-.869 4.387 4.02 4.02 0 001.476 1.806 3.993 3.993 0 002.226.678 4.003 4.003 0 002.832-1.18A4.04 4.04 0 0034 15.993z"
      />
      <path
        fill="#6875F5"
        d="M5.007 11.969c-.793 0-1.567.236-2.226.678a4.021 4.021 0 00-1.476 1.807 4.042 4.042 0 00.869 4.386 4.001 4.001 0 004.366.873 4.011 4.011 0 001.798-1.483 4.038 4.038 0 00-.5-5.08 4.004 4.004 0 00-2.831-1.181z"
      />
      <path
        fill={textColor}
        d="M58.664 11.136l-2.04 7.392-2.184-7.392h-2.928l-2.184 7.368-2.04-7.368H44l3.816 12h2.952l2.208-7.272 2.208 7.272h2.952l3.816-12h-3.288zM68.864 23.472c3.528 0 6.36-2.76 6.36-6.336 0-3.576-2.832-6.336-6.36-6.336-3.528 0-6.336 2.76-6.336 6.336 0 3.576 2.808 6.336 6.336 6.336zm0-3.024c-1.824 0-3.24-1.368-3.24-3.312 0-1.944 1.416-3.312 3.24-3.312 1.848 0 3.264 1.368 3.264 3.312 0 1.944-1.416 3.312-3.264 3.312zM80.498 13.2v-2.064h-3.096v12h3.096V17.4c0-2.52 2.04-3.24 3.648-3.048v-3.456c-1.512 0-3.024.672-3.648 2.304zM97.02 23.136l-4.967-6.072 4.824-5.928H93.18l-4.128 5.28V6.336h-3.096v16.8h3.096v-5.448l4.368 5.448h3.6zM105.022 6c-3.816 0-5.64 1.704-5.64 5.016v.12h-1.728v2.976h1.728v9.024h3.096v-9.024h1.992v-2.976h-1.992v-.12c0-1.632.936-2.304 2.544-2.304.312 0 .648 0 .984.024v14.4h3.096V6.504c-1.32-.264-2.568-.504-4.08-.504zM117.637 23.472c3.528 0 6.36-2.76 6.36-6.336 0-3.576-2.832-6.336-6.36-6.336-3.528 0-6.336 2.76-6.336 6.336 0 3.576 2.808 6.336 6.336 6.336zm0-3.024c-1.824 0-3.24-1.368-3.24-3.312 0-1.944 1.416-3.312 3.24-3.312 1.848 0 3.264 1.368 3.264 3.312 0 1.944-1.416 3.312-3.264 3.312zM139.219 11.136l-2.04 7.392-2.184-7.392h-2.928l-2.184 7.368-2.04-7.368h-3.288l3.816 12h2.952l2.208-7.272 2.208 7.272h2.952l3.816-12h-3.288z"
      />
    </Box>
  );
}
Example #10
Source File: page.js    From dashboard with MIT License 6 votes vote down vote up 
export default function Page({ children }) {
  const bgColor = useColorModeValue('white', 'gray.900');
  const primarytextColor = useColorModeValue('black', 'white');

  return (
    <>
      <Header />

      <Flex
        as="main"
        w="full"
        justify="center"
        direction="column"
        px={[4, 6, null, 8]}
        mt={16}
        h="calc(100vh - 4rem)"
        bg={bgColor}
        color={primarytextColor}
      >
        <Flex
          direction="column"
          w="full"
          h="full"
          justify="center"
          align="center"
          pt={[8, 10, null, 12]}
        >
          <Flex direction="column" w="full" h="full" maxW="5xl">
            {children}
            <Footer />
          </Flex>
        </Flex>
      </Flex>
    </>
  );
}
Example #11
Source File: theme-toggle.js    From dashboard with MIT License 6 votes vote down vote up 
export default function ThemeToggle(props) {
  const { toggleColorMode, newColorMode } = useColorMode();
  const Icon = useColorModeValue(
    <Moon h={5} color="gray.600" />,
    <Sun h={5} />
  );

  return (
    <IconButton
      data-testid="theme-toggle"
      variant="ghost"
      aria-label={`Toggle ${newColorMode} mode`}
      title={`Activated ${newColorMode} mode`}
      icon={Icon}
      onClick={toggleColorMode}
      {...props}
    />
  );
}