fixed color mode button background

client/src/pages/home/Home.jsx

@@ -1,4 +1,4 @@
-import {HStack, Flex, Box, useRecipe} from "@chakra-ui/react";
+import {HStack, Flex, Box, useRecipe, useSlotRecipe} from "@chakra-ui/react";
 import {NavLink, Outlet, useLocation} from "react-router-dom";
 import {SearchBar} from "../../components/dashboard/SearchBar.jsx";
 import {SettingsButton} from "../../components/dashboard/SettingsButton.jsx";
@@ -16,30 +16,23 @@ const HOME_TABS = [
 ];
 
 export default function Home() {
-  const recipe = useRecipe({key: "glassTab"});
-  const tabStyles = recipe();
+  const glassTabsRecipe = useRecipe({key: "glassTab"});
+  const homeRecipe = useSlotRecipe({key: "home"});
+  const glassTabsStyle = glassTabsRecipe();
+  const homeStyle = homeRecipe();
 
-  const location = useLocation();
-  const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
+  const location= useLocation();
+  const isPersonalDashboard= location.pathname === "/home" || location.pathname === "/home/";
 
   return (
-    <Flex direction="column" height="100%" width="100%">
-
-      <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center"
-            justify="space-between" width="100%">
-
+    <Flex css={homeStyle.root}>
+      <Flex as="header">
         {/* TABS CONTAINER */}
-        <Flex gap={2} alignItems="center">
+        <Flex>
           {HOME_TABS.map((tab) => {
             const Icon = tab.icon;
             return (
-              <Box
-                key={tab.name}
-                as={NavLink}
-                to={tab.url}
-                end={tab.exact} // CRITICAL: Forces exact match so "/home" deactivates on sub-routes
-                css={tabStyles}
-              >
+              <Box key={tab.name} as={NavLink} to={tab.url} end={tab.exact} css={glassTabsStyle}> {/* CRITICAL: 'end' prop forces exact match so "/home" deactivates on sub-routes*/}
                 {/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
                 <Icon size={24} style={{flexShrink: 0}}/>
                 <Box as="span">{tab.name}</Box>
@@ -59,7 +52,7 @@ export default function Home() {
       </Flex>
 
       {/* TABS CONTENT */}
-      <Flex flex="1" overflow="auto">
+      <Flex>
         <Outlet/>
       </Flex>