Build the color mode switch

src/App.tsx

@@ -13,11 +13,11 @@ function App() {
         <NavBar />
       </GridItem>
       <Show above="lg">
-        <GridItem area="aside" bg="gold">
+        <GridItem area="aside">
           Aside
         </GridItem>
       </Show>
-      <GridItem area="main" bg="dodgerblue">
+      <GridItem area="main">
         Main
       </GridItem>
     </Grid>

src/components/ColorModeSwitch.tsx

@@ -0,0 +1,14 @@
+import { HStack, Switch, Text, useColorMode } from '@chakra-ui/react'
+
+const ColorModeSwitch = () => {
+  const {toggleColorMode, colorMode} = useColorMode();
+
+  return (
+    <HStack>
+      <Switch colorScheme='green' isChecked={colorMode === 'dark'} onChange={toggleColorMode} />
+      <Text>Dark Mode</Text>
+    </HStack>
+  )
+}
+
+export default ColorModeSwitch

src/components/NavBar.tsx

@@ -1,11 +1,12 @@
-import { HStack, Image, Text } from '@chakra-ui/react'
+import { HStack, Image } from '@chakra-ui/react'
 import logo from '../assets/logo.webp';
+import ColorModeSwitch from './ColorModeSwitch';
 
 const NavBar = () => {
   return (
-    <HStack>
+    <HStack justifyContent='space-between' padding='10px'>
       <Image src={logo} boxSize='60px' />
-      <Text>NavBar</Text>
+      <ColorModeSwitch />
     </HStack>
   )
 }