added background to homepage / sidebar

01-frontend/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { Alert, Box } from "@mui/material";
+import { Alert, Box, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,6 +15,7 @@ export default function Home() {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const location = useLocation();
+    const theme = useTheme();
     const [searchQuery, setSearchQuery] = useState<string | null>(null);
 
     const categoriesFilter = useMemo(() => [
@@ -183,7 +184,10 @@ export default function Home() {
 
 
     return (
-        <div className="home-page-background">
+        <div
+            className="home-page-background"
+            style={{ backgroundColor: theme.palette.homepage }}
+        >
             <div className="filter-container">
                 <FilterItem
                     filterName={t("category")}

01-frontend/src/theme/ThemeContext.tsx

@@ -107,6 +107,7 @@ export const CustomThemeProvider: React.FC<CustomThemeProviderProps> = ({ childr
                         primary: mode === 'dark' ? '#ffffff' : '#000000',
                         secondary: mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.6)',
                     },
+                    homepage: mode === 'dark' ? '#1e1e1e' : '#f4f4f4',
                 },
                 components: {
                     MuiCssBaseline: {

01-frontend/src/theme/theme-augmentation.d.ts

@@ -3,9 +3,11 @@ import '@mui/material/styles';
 declare module '@mui/material/styles' {
     interface Palette {
         tertiary: Palette['primary'];
+        homepage: string;
     }
 
     interface PaletteOptions {
         tertiary?: PaletteOptions['primary'];
+        homepage?: string;
     }
 }