map has dark mode

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -1,5 +1,5 @@
 import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
-import { ColorModeButton } from "@/components/ui/color-mode";
+import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
 // import { Tooltip } from "@/components/ui/tooltip";
 import Tooltip from "../Canvas/components/Tooltip.jsx";
 import { FaVolcano } from "react-icons/fa6";
@@ -12,11 +12,12 @@ import { useState, useEffect } from "react";
 import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
-export default function Sidebar({ view, onChangeView }) {
+export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
   const [isOpen, setIsOpen] = useState(true);
   const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
+  const { toggleColorMode } = useColorMode();
 
     // this list of btns will come from the db (not every usr will have access to admin)
   const buttons = [
@@ -99,7 +100,14 @@ export default function Sidebar({ view, onChangeView }) {
           </Tooltip>
         )
       })}
-      <ColorModeButton position="absolute" bottom="2"/>
+      <ColorModeButton 
+      onClick={
+        () => {
+          setDarkMode(!darkMode);
+          toggleColorMode();
+        }}
+      position="absolute" 
+      bottom="2"/>
     </Box>
   );
 }