Lc dark mode bg image

src/components/ListItem.jsx

@@ -96,7 +96,19 @@ export function ListItem({
 
 	return (
 		<>
-			<Card sx={{ border: '1px solid #003780', borderRadius: 2 }}>
+			<Card
+				sx={{
+					borderRadius: 2,
+					border: (theme) => {
+						return theme.palette.mode === 'dark'
+							? '1.5px solid #f8f9fa'
+							: '1.5px solid #003780';
+					},
+					backgroundColor: (theme) => {
+						return theme.palette.mode === 'dark' ? '#003780' : undefined;
+					},
+				}}
+			>
 				<li
 					className="ListItem"
 					style={{
@@ -121,13 +133,23 @@ export function ListItem({
 							sx={{
 								marginRight: 2,
 								backgroundColor: chipBackgroundColor,
+								color: (theme) => {
+									return theme.palette.mode === 'dark' ? '#003780' : undefined;
+								},
 								width: 75,
 							}}
 						/>
 						<Button
 							sx={{
-								color: '#003780',
-								border: '1px solid #003780',
+								color: (theme) => {
+									return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+								},
+
+								border: (theme) => {
+									return theme.palette.mode === 'dark'
+										? '1px solid #f8f9fa'
+										: '1px solid #003780';
+								},
 								width: '80px',
 							}}
 							onClick={handleClick}

src/components/SingleList.jsx

@@ -8,13 +8,10 @@ import {
 	Modal,
 	Box,
 	Card,
-	CardContent,
 	Typography,
 	Button,
 	CardMedia,
 	CardActions,
-	IconButton,
-	ButtonGroup,
 	Stack,
 } from '@mui/material';
 import '../views/Home.css';
@@ -95,7 +92,14 @@ export function SingleList({ name, path, setListPath, userId }) {
 		<Card
 			className="card"
 			sx={{
-				border: '1.5px solid #003780',
+				border: (theme) => {
+					return theme.palette.mode === 'dark'
+						? '1.5px solid #f8f9fa'
+						: '1.5px solid #003780';
+				},
+				backgroundColor: (theme) => {
+					return theme.palette.mode === 'dark' ? '#003780' : undefined;
+				},
 				borderRadius: '10px',
 				paddingX: '1.5rem',
 				display: 'flex',
@@ -104,7 +108,7 @@ export function SingleList({ name, path, setListPath, userId }) {
 			}}
 		>
 			<Stack direction="column">
-				<CardMedia>
+				<CardMedia sx={{ marginX: 'auto' }}>
 					<Box className="icon-background">
 						<img
 							src={`/img/food-icon2/${icon}`}
@@ -116,32 +120,53 @@ export function SingleList({ name, path, setListPath, userId }) {
 				<CardActions sx={{ justifyContent: 'center' }}>
 					<Stack direction="column" sx={{ width: '100%' }}>
 						<Button
-							sx={{ border: '1.5px solid #003780', borderRadius: '10px' }}
+							sx={{
+								border: (theme) => {
+									return theme.palette.mode === 'dark'
+										? '1.5px solid #f8f9fa'
+										: '1.5px solid #003780';
+								},
+								borderRadius: '10px',
+								color: (theme) => {
+									return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+								},
+							}}
 							onClick={handleViewClick}
 						>
 							<Typography variant="body1">{name}</Typography>
 						</Button>
 						{currentUserIsOwner && (
 							<>
-						    <Button
-								onClick={handleOpenModal}
-								sx={{ width: '100%', textAlign: 'center' }}
-							>
-								<Typography
+								<Button
+									onClick={handleOpenModal}
 									sx={{
+										width: '100%',
 										textAlign: 'center',
-										fontSize: '1.5rem',
-										color: '#003780',
-										fontWeight: '600',
-										textTransform: 'none',
+										color: (theme) => {
+											return theme.palette.mode === 'dark'
+												? '#f8f9fa'
+												: '#003780';
+										},
 									}}
 								>
-									Share this list{' '}
-								</Typography>{' '}
-								<ShareIcon
-									sx={{ color: '#003780', margin: '0 5px', fontSize: '1.5rem' }}
-								/>
-							</Button>
+									<Typography
+										sx={{
+											textAlign: 'center',
+											fontSize: '1.5rem',
+
+											fontWeight: '600',
+											textTransform: 'none',
+										}}
+									>
+										Share this list{' '}
+									</Typography>{' '}
+									<ShareIcon
+										sx={{
+											margin: '0 5px',
+											fontSize: '1.5rem',
+										}}
+									/>
+								</Button>
 								<Modal
 									open={openModal}
 									onClose={handleCloseModal}
@@ -168,19 +193,23 @@ export function SingleList({ name, path, setListPath, userId }) {
 								</Modal>
 							</>
 						)}
-           {!currentUserIsOwner && (
-						<Typography
-							sx={{
-								textAlign: 'center',
-								fontSize: '1.5rem',
-								color: '#003780',
-								fontWeight: '600',
-							}}
-						>
-							Shared by {ownerName}
-						</Typography>
-					)}
-
+						{!currentUserIsOwner && (
+							<Typography
+								sx={{
+									textAlign: 'center',
+									fontSize: '1.5rem',
+
+									color: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '#f8f9fa'
+											: '#003780';
+									},
+									fontWeight: '600',
+								}}
+							>
+								Shared by {ownerName}
+							</Typography>
+						)}
 					</Stack>
 				</CardActions>
 			</Stack>

src/index.css

@@ -21,7 +21,7 @@ html {
 }
 
 body {
-	background-image: url('/img/main-background-image.png');
+	/* background-image: url('/img/main-background-image.png'); */
 	background-size: 65%;
 	background-position-y: top;
 	color: var(--color-text);

src/views/Home.jsx

@@ -1,18 +1,18 @@
+import { useEffect, useRef, useState } from 'react';
+import { createList } from '../api/firebase';
+import Input from '@mui/material/Input';
+import InputLabel from '@mui/material/InputLabel';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
-import Input from '@mui/material/Input';
-import InputLabel from '@mui/material/InputLabel';
-import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { useEffect, useRef, useState } from 'react';
-import { createList } from '../api/firebase';
-import { SignInButton } from '../api/useAuth';
-import { SingleList } from '../components/SingleList';
-import './Home.css';
+import Stack from '@mui/material/Stack';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Link from '@mui/material/Link';
 import Container from '@mui/material/Container';
+import { SignInButton } from '../api/useAuth';
+import { SingleList } from '../components/SingleList';
+import './Home.css';
 
 export function Home({ data, setListPath, userEmail, userId }) {
 	const [shoppingListName, setShoppingListName] = useState('');
@@ -152,7 +152,24 @@ export function Home({ data, setListPath, userEmail, userId }) {
 								placeholder="Add list"
 								className="input-button-common"
 							/>
-							<Button type="submit" disabled={shoppingListName.length === 0}>
+							<Button
+								sx={{
+									color: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '#f8f9fa'
+											: '#003780';
+									},
+
+									border: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '1px solid #f8f9fa'
+											: '1px solid #003780';
+									},
+									width: '80px',
+								}}
+								type="submit"
+								disabled={shoppingListName.length === 0}
+							>
 								Submit
 							</Button>
 						</Stack>

src/views/Layout.css

@@ -11,7 +11,7 @@
 .Layout {
 	display: flex;
 	flex-direction: column;
-	height: 100dvh;
+	min-height: 100dvh;
 }
 
 .Layout > * {

src/views/Layout.jsx

@@ -1,15 +1,31 @@
 import { Outlet } from 'react-router-dom';
+// import SvgIcon from '@mui/material/SvgIcon';
+
 import { useThemeContext } from '../components/ThemeContext';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import { IconButton, Grid } from '@mui/material';
+
 import './Layout.css';
+
+// import { auth } from '../api/config.js';
+// import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
+
 import { NavBar } from '../components';
+import { Box } from '@mui/material';
 
 export function Layout() {
 	const { toggleColorMode, mode } = useThemeContext();
 	return (
-		<>
+		<Box
+			sx={{
+				backgroundImage: (theme) => {
+					return theme.palette.mode === 'dark'
+						? 'url("/img/main-background-image-darkmode.png")'
+						: 'url("/img/main-background-image.png")';
+				},
+			}}
+		>
 			<div className="Layout">
 				<header className="Layout-header">
 					<Grid container>
@@ -66,6 +82,6 @@ export function Layout() {
 					<Outlet />
 				</main>
 			</div>
-		</>
+		</Box>
 	);
 }