dark mode technically works

but it is terrible

client/src/components/header.jsx

@@ -1,32 +1,23 @@
 
-import { Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react"
+import { chakra, useRecipe, Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react"
 
 export default function Header() {
+  const recipe = useRecipe({ key: "header" });
+  const styles = recipe();
   return (
-    <Box  w="100%" h="100%" 
-          borderBottom="1px" 
-          borderColor="black" 
-          borderStyle="solid" 
-          display="flex" 
-          flexDirection="row" 
-          justifyContent="space-between" 
-          alignItems="center" paddingLeft={5} paddingRight={2}
-          bg="#EDF1F1"
-    >
-      <Button color="#19332D" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
+    <chakra.div css={styles}>
+      <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
       <Button variant="plain">
-        <HStack key={user.email} gap="4">
-          <Stack gap="0">
-            <Text color="#19332D" fontWeight="bold" textStyle="lg">{user.name}</Text>
-            <Text color="fg.muted" textStyle="sm">{user.email}</Text>
-          </Stack>
-          <Avatar.Root>
-            <Avatar.Fallback name={user.name} />
-            <Avatar.Image src={user.avatar} />
-          </Avatar.Root>
-        </HStack>
+        <Stack gap="0">
+          <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
+          <Text color="fg.muted" textStyle="sm">{user.email}</Text>
+        </Stack>
+        <Avatar.Root>
+          <Avatar.Fallback name={user.name} />
+          <Avatar.Image src={user.avatar} />
+        </Avatar.Root>
       </Button>
-    </Box>
+    </chakra.div>
   );
 }