refactor: read color of section from theme

Author: pooriaset

public/assets/images/logo-dark.svg

@@ -0,0 +1,15 @@
+'use client';
+
+import { Box, darken, styled } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
+
+const ColorfulSection = styled(Box)<{}>(({ theme }) => ({
+  padding: theme.spacing(2, 0),
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? blueGrey['50']
+      : darken(blueGrey['900'], 0.5),
+  width: '100%',
+}));
+
+export default ColorfulSection;

public/assets/images/logo.svg renamed to public/assets/images/logo-light.svg

@@ -26,6 +26,7 @@ import ProductsSlider from './components/ProductsSlider';
 import SlidersContainer from './components/SlidersContainer';
 import SlidersSkeleton from './components/SlidersSkeleton';
 import { Header } from '@/components/Header';
+import ColorfulSection from './components/ColorfulSection';
 
 const getCategories = async () => {
   const { data } = await getClient().query<GetMainCategoriesQuery>({
@@ -181,17 +182,11 @@ export default async function Home() {
         </SlidersContainer>
 
         {!!_posts.length && (
-          <Box
-            sx={{
-              py: 2,
-              bgcolor: '#f1f4f7',
-              width: '100%',
-            }}
-          >
+          <ColorfulSection>
             <SlidersContainer>
               <PostsSlider items={_posts} />
             </SlidersContainer>
-          </Box>
+          </ColorfulSection>
         )}
       </Stack>
     </>

src/app/[locale]/(main)/(homepage)/components/ColorfulSection.tsx

@@ -1,15 +1,23 @@
 import React, { FC } from 'react';
 import Image from './Image';
 import { ImageProps } from 'next/image';
+import { useTheme } from '@mui/material';
 
 const Logo: FC<Partial<ImageProps>> = (props) => {
+  const options = {
+    dark: '/assets/images/logo-dark.svg',
+    light: '/assets/images/logo-light.svg',
+  };
+
+  const theme = useTheme();
+
   return (
     <Image
       draggable={false}
       width={176}
       height={32}
       alt="Logo"
-      src="/assets/images/logo.svg"
+      src={options[theme.palette.mode]}
       style={{
         width: 'fit-content',
       }}

src/app/[locale]/(main)/(homepage)/page.tsx

@@ -70,6 +70,7 @@ const themeOptions: ThemeOptions = {
       main: green[500],
       contrastText: '#fff',
       lighter: green[200],
+      ...green,
     },
   },
   shape: {