Fixed background color not changing on theme swap

Client/src/Layouts/HomeLayout/index.css

@@ -1,7 +1,3 @@
-#root:has(.home-layout) {
-  background-color: var(--secondary-bg);
-}
-
 .home-layout {
   position: relative;
   min-height: 100vh;

Client/src/Layouts/HomeLayout/index.jsx

@@ -1,24 +1,15 @@
 import Sidebar from "../../Components/Sidebar";
 import { Outlet } from "react-router";
-import { Box, Stack } from "@mui/material";
-import { useTheme } from "@emotion/react";
+import { Stack } from "@mui/material";
 
 import "./index.css";
 
 const HomeLayout = () => {
-  const theme = useTheme();
-
   return (
-    <Box backgroundColor={theme.palette.background.alt}>
-      <Stack
-        className="home-layout"
-        flexDirection="row"
-        gap={theme.spacing(14)}
-      >
-        <Sidebar />
-        <Outlet />
-      </Stack>
-    </Box>
+    <Stack className="home-layout" flexDirection="row" gap={14}>
+      <Sidebar />
+      <Outlet />
+    </Stack>
   );
 };