add sun icon when in dark mode

src/components/UI/Header.tsx

@@ -2,11 +2,12 @@ import { Box, Flex, Input, InputGroup, Link, Stack, Text, useColorMode } from '@
 import { FC } from 'react';
 import NextLink from 'next/link';
 
-import { HamburgerIcon, LensIcon, MoonIcon } from '../UI/icons';
+import { HamburgerIcon, LensIcon, MoonIcon, SunIcon } from '../UI/icons';
 import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants';
 
 export const Header: FC = () => {
-  const { toggleColorMode } = useColorMode();
+  const { colorMode, toggleColorMode } = useColorMode();
+  const isDark = colorMode === 'dark';
   return (
     <Flex
       mb={4}
@@ -107,7 +108,7 @@ export const Header: FC = () => {
           borderColor='primary'
           onClick={toggleColorMode}
         >
-          <MoonIcon color="primary" />
+          {isDark ? <SunIcon color="primary" /> : <MoonIcon color="primary" />}
         </Box>
 
         {/* HAMBURGER MENU */}

src/components/UI/icons/SunIcon.tsx

@@ -0,0 +1,19 @@
+import { createIcon } from '@chakra-ui/icons';
+
+export const SunIcon = createIcon({
+  displayName: 'SunIcon',
+  viewBox: '0 0 44 44',
+  path: (
+    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M21 0H23V12H21V0Z" fill="currentColor"/>
+      <path d="M0 23V21H12V23H0Z" fill="currentColor"/>
+      <path d="M44 21H32V23H44V21Z" fill="currentColor"/>
+      <path d="M21 32H23V44H21V32Z" fill="currentColor"/>
+      <path d="M7.15074 5.73633L5.73653 7.15054L14.2218 15.6358L15.636 14.2216L7.15074 5.73633Z" fill="currentColor"/>
+      <path d="M36.8493 5.73618L38.2635 7.15039L29.7782 15.6357L28.364 14.2215L36.8493 5.73618Z" fill="currentColor"/>
+      <path d="M29.7782 28.3643L28.364 29.7785L36.8492 38.2638L38.2635 36.8495L29.7782 28.3643Z" fill="currentColor"/>
+      <path d="M14.2218 28.3641L15.636 29.7783L7.15076 38.2636L5.73655 36.8494L14.2218 28.3641Z" fill="currentColor"/>
+      <path d="M30 22C30 26.4183 26.4183 30 22 30C17.5817 30 14 26.4183 14 22C14 17.5817 17.5817 14 22 14C26.4183 14 30 17.5817 30 22Z" fill="currentColor"/>
+    </svg>
+  )
+});

src/components/UI/icons/index.ts

@@ -3,4 +3,5 @@ export * from './GitHubIcon';
 export * from './HamburgerIcon';
 export * from './LensIcon';
 export * from './MoonIcon';
+export * from './SunIcon';
 export * from './TwitterIcon';