Background images working

src/pages/settings/components/ThemeModalContent.tsx

@@ -73,6 +73,8 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 		<Stack
 			style={{
 				width: '100%',
+				background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), no-repeat center url(../src/images/backgrounds/${selectedTheme.backgroundImage})`,
+				backgroundSize: 'cover',
 				backgroundColor: selectedTheme.backgroundColor,
 				borderRadius: '10px',
 				border: '2px solid',

src/pages/settings/components/Themes.tsx

@@ -79,7 +79,6 @@ function ThemesSettings({ theme }: any) {
 		openDeleteConfirmModal(theme);
 		close();
 	};
-
 	return (
 		<>
 			<Modal.Root
@@ -91,10 +90,10 @@ function ThemesSettings({ theme }: any) {
 				style={{
 					'--color-text-pri': theme.primaryColor,
 					'--color-text-acc': theme.accentColor,
-					'--color-background': theme.backgroundColor,
+					'--color-background': theme.backgroundImage ? 'gray' : theme.backgroundColor,
 					'--color-border': theme.borderColor,
 					'--color-search-background': theme.searchColor,
-					'--image-background': `url(${theme.backgroundImage})`,
+					'--image-background': `url("${theme.backgroundImage}")`,
 				}}
 			>
 				<Modal.Overlay />