Background images working

src/App.tsx

@@ -1,4 +1,5 @@
 import {
+	Box,
 	DEFAULT_THEME,
 	MantineProvider,
 	createTheme,
@@ -23,6 +24,7 @@ import 'mantine-react-table/styles.css'; //import MRT styles
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useAtom } from 'jotai';
 import { appTheme } from './contexts/theme';
+import './index.css';
 
 function App() {
 	const { data, isFetched } = useQueryAPI({
@@ -63,8 +65,20 @@ function App() {
 				<MantineProvider theme={mantineTheme}>
 					<ThemeProvider theme={theme}>
 						<ModalsProvider>
+							<>
+								<Box
+									style={{
+										width: '100%',
+										height: '100%',
+										position: 'fixed',
+										background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), no-repeat center url(../src/images/backgrounds/${theme.backgroundImage})`,
+										backgroundSize: 'cover',
+										zIndex: -1,
+									}}
+								/>
 								<RouterProvider router={router} />
 								<ReactQueryDevtools initialIsOpen={false} />
+							</>
 						</ModalsProvider>
 					</ThemeProvider>
 				</MantineProvider>

src/components/ThemeProvider.tsx

@@ -12,7 +12,6 @@ export default function ThemeProvider({
 				'--color-background': theme.backgroundColor,
 				'--color-border': theme.borderColor,
 				'--color-search-background': theme.searchColor,
-				'--image-background': `url(${theme.backgroundImage})`,
 			}}
 		>
 			{children}

src/index.css

@@ -1,9 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap');
 
-.root {
-	background-image: var(--image-background);
-}
-
 .mrt-edit-action-buttons {
 	.mantine-Button-root[data-variant="subtle"] {
 		color: var(--color-text-pri) !important;

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