Add Chakra darkmode theme to canvas header

client/src/components/CanvasHeader.jsx

@@ -1,17 +1,21 @@
-import { Flex, HStack } from "@chakra-ui/react";
+import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
 import { CanvasHeaderNav } from "./CanvasHeaderNav";
 import { SearchBar } from "./SearchBar";
 import { SettingsButton } from "./SettingsButton";
 
+
+
 export default function CanvasHeader() {
+    const recipe = useRecipe({ key: "canvas" });
+    const styles = recipe();
     return (
-        <>
+        <chakra.div css={styles}>
             <Flex
                 as="header"
                 position="sticky"
                 top="0"
                 // zIndex="banner"
-                bg="white"
+                bg="base200"
                 borderBottom="1px solid"
                 borderColor="gray.200"
                 px={6}
@@ -25,6 +29,6 @@ export default function CanvasHeader() {
                     <SettingsButton />
                 </HStack>
             </Flex>
-        </>
+        </chakra.div>
     );
 }