From 56b2644fe50df1b419ca6e0e34b66c0a2f0cde8d Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Wed, 16 Jul 2025 13:28:13 -0700
Subject: [PATCH] Add Chakra darkmode theme to canvas header

---
 client/src/components/CanvasHeader.jsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/components/CanvasHeader.jsx b/client/src/components/CanvasHeader.jsx
index fd0a10b..57ff277 100644
--- a/client/src/components/CanvasHeader.jsx
+++ b/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>
     );
 }
\ No newline at end of file