Background images working

src/pages/homepage/Homepage.tsx

@@ -1,4 +1,5 @@
 import { Stack } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
 import { useQueryAPI } from '../../hooks/useAPI';
 import stackClasses from '../../styles/Stack.module.css';
@@ -7,8 +8,6 @@ import Bookmarks from './components/Bookmarks';
 import Header from './components/Header';
 import Search from './components/Search';
 import SettingsButton from './components/SettingsButton';
-import '../../index.css';
-import { useLocalStorage } from '@mantine/hooks';
 
 export default function Homepage({ theme }: any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });

src/pages/settings/Settings.tsx

@@ -12,7 +12,7 @@ import Themes from './components/Themes';
 
 function Settings({ theme }: any) {
 	return (
-		<Stack h={'100vh'} px={'2rem'} bg={'var(--color-background)'}>
+		<Stack h={'100vh'} px={'2rem'}>
 			<Group gap={0}>
 				<ActionIcon
 					className={actionIconClasses.backButton}

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 />