Theme changes

src/components/MainLayout.tsx

@@ -1,10 +1,17 @@
 import { Box } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { Outlet } from 'react-router-dom';
 import { boxClasses } from 'styles';
 
 export function MainLayout() {
+	const { theme } = useCommonHooks();
 	return (
-		<Box className={boxClasses.layoutContainer}>
+		<Box
+			className={boxClasses.layoutContainer}
+			style={{
+				'--image-background': `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
+			}}
+		>
 			<Outlet />
 		</Box>
 	);