From 7d210c5a8f716299b62451a2f0a14306e4aea719 Mon Sep 17 00:00:00 2001
From: Mosh Hamedani <programmingwithmosh@gmail.com>
Date: Tue, 28 Feb 2023 10:40:59 -0800
Subject: [PATCH] Build the color mode switch

---
 src/App.tsx                        |  4 ++--
 src/components/ColorModeSwitch.tsx | 14 ++++++++++++++
 src/components/NavBar.tsx          |  7 ++++---
 3 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ColorModeSwitch.tsx

diff --git a/src/App.tsx b/src/App.tsx
index bd6d1c5..3630cd3 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/ColorModeSwitch.tsx b/src/components/ColorModeSwitch.tsx
new file mode 100644
index 0000000..1fa02cc
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index a08ab81..c7eff32 100644
--- a/src/components/NavBar.tsx
+++ b/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>
   )
 }