navigation in dark mode

icons/networks.svg

-<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.632a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263ZM0 10a2.632 2.632 0 1 1 5.263 0A2.632 2.632 0 0 1 0 10Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.264 2.632 2.632 0 0 0 0-5.264Zm-2.631 10a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0ZM2.632 14.737a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263Zm7.368 0A2.632 2.632 0 1 0 10 20a2.632 2.632 0 0 0 0-5.263Z" fill="#718096"/></svg>
\ No newline at end of file
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.632a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263ZM0 10a2.632 2.632 0 1 1 5.263 0A2.632 2.632 0 0 1 0 10Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.264 2.632 2.632 0 0 0 0-5.264Zm-2.631 10a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0ZM2.632 14.737a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263Zm7.368 0A2.632 2.632 0 1 0 10 20a2.632 2.632 0 0 0 0-5.263Z" fill="currentColor"/></svg>
\ No newline at end of file

theme/global.ts

+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
+
+const global = (props: StyleFunctionProps) => ({
+  body: {
+    bg: mode('white', 'black')(props),
+  },
+})
+
+export default global;

theme/index.ts

@@ -5,6 +5,7 @@ import borders from './foundations/borders';
 import colors from './foundations/colors';
 import components from './components/index';
 import config from './config';
+import global from './global';
 
 const overrides = {
   ...typography,
@@ -12,6 +13,9 @@ const overrides = {
   colors,
   components,
   config,
+  styles: {
+    global,
+  },
 }
 
 export default extendTheme(overrides);

ui/navigation/AccountNavLink.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link, Icon, Text, HStack } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
+import useColors from './useColors';
 
 interface Props {
   pathname: string;
@@ -13,6 +14,8 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
   const router = useRouter();
   const isActive = router.pathname === pathname;
 
+  const colors = useColors();
+
   return (
     <NextLink href={ pathname } passHref>
       <Link
@@ -21,9 +24,9 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
         w="220px"
         px={ 4 }
         py={ 2.5 }
-        color={ isActive ? 'blue.700' : 'gray.600' }
-        bgColor={ isActive ? 'blue.50' : 'transparent' }
-        _hover={{ color: 'blue.400' }}
+        color={ isActive ? colors.text.active : colors.text.default }
+        bgColor={ isActive ? colors.bg.active : colors.bg.default }
+        _hover={{ color: colors.text.hover }}
         borderRadius="base"
       >
         <HStack spacing={ 3 }>

ui/navigation/MainNavLink.tsx

@@ -3,6 +3,7 @@ import { Link, Icon, Text, HStack } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 import { ChevronRightIcon } from '@chakra-ui/icons'
+import useColors from './useColors';
 
 interface Props {
   pathname: string;
@@ -14,6 +15,8 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
   const router = useRouter();
   const isActive = router.pathname === pathname;
 
+  const colors = useColors();
+
   return (
     <NextLink href={ pathname } passHref>
       <Link
@@ -22,10 +25,10 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
         w="220px"
         px={ 4 }
         py={ 2.5 }
-        color={ isActive ? 'blue.700' : 'gray.600' }
-        bgColor={ isActive ? 'blue.50' : 'transparent' }
+        color={ isActive ? colors.text.active : colors.text.default }
+        bgColor={ isActive ? colors.bg.active : colors.bg.default }
+        _hover={{ color: colors.text.hover }}
         borderRadius="base"
-        _hover={{ color: 'blue.400' }}
       >
         <HStack justifyContent="space-between">
           <HStack spacing={ 3 }>

ui/navigation/NavFooter.tsx

 import React from 'react';
 
-import { VStack, Text, HStack, Icon, Link } from '@chakra-ui/react';
+import { VStack, Text, HStack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
 
 import ghIcon from '../../icons/social/git.svg';
 import twIcon from '../../icons/social/tweet.svg';
@@ -20,7 +20,7 @@ const NavFooter = () => {
       as="footer"
       spacing={ 8 }
       borderTop="1px solid"
-      borderColor="gray.200"
+      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
       paddingTop={ 8 }
       w="100%"
       alignItems="baseline"

ui/navigation/Navigation.tsx

 import React from 'react';
-import { VStack, HStack, Icon } from '@chakra-ui/react';
+import { VStack, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
 
 import AccountNavigation from './AccountNavigation';
 import MainNavigation from './MainNavigation';
@@ -14,14 +14,14 @@ const Navigation = () => {
       alignItems="flex-start"
       spacing={ 12 }
       borderRight="1px solid"
-      borderColor="gray.200"
+      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
       px={ 10 }
       py={ 12 }
       width="300px"
     >
       <HStack as="header" justifyContent="space-between" w="100%" px={ 4 } mb={ 2 } h={ 10 } alignItems="center">
-        <Icon as={ logoIcon } width="142px" height="26px" color="blue.600"/>
-        <Icon as={ networksIcon } width="20px" height="20px"/>
+        <Icon as={ logoIcon } width="142px" height="26px" color={ useColorModeValue('blue.600', 'white') }/>
+        <Icon as={ networksIcon } width="20px" height="20px" color={ useColorModeValue('gray.500', 'white') }/>
       </HStack>
       <MainNavigation/>
       <AccountNavigation/>

ui/navigation/useColors.ts

+import { useColorModeValue } from '@chakra-ui/react';
+
+export default function useColors() {
+  return {
+    text: {
+      'default': useColorModeValue('gray.600', 'gray.300'),
+      active: useColorModeValue('blue.700', 'gray.300'),
+      hover: useColorModeValue('blue.400', 'gray.100'),
+    },
+    bg: {
+      'default': 'transparent',
+      active: useColorModeValue('blue.50', 'gray.900'),
+    },
+  }
+}