Add Chakra darkmode theme to canvas header

2025-07-16 13:28:13 -07:00
parent 2b1779716c
commit 56b2644fe5
1 changed files with 8 additions and 4 deletions
@@ -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>
    );
 }