Merge pull request #3374 from bluewave-labs/fix/dark-mode-background-color

Fix dark mode background to use neutral gray

client/src/Components/layout/AppLayout.tsx

@@ -1,9 +1,6 @@
 import Box from "@mui/material/Box";
 import { useState, useEffect, useRef } from "react";
 import { useTheme } from "@mui/material/styles";
-import { useSelector } from "react-redux";
-import BackgroundSVG from "@/assets/Images/background.svg";
-import type { RootState } from "@/Types/state";
 import { OfflineBanner } from "@/Components/design-elements";
 import { setServerUnreachableCallback, get } from "@/Utils/ApiClient";
 
@@ -13,7 +10,6 @@ interface AppLayoutProps {
 
 const AppLayout = ({ children }: AppLayoutProps) => {
 	const theme = useTheme();
-	const mode = useSelector((state: RootState) => state.ui.mode);
 	const [serverUnreachable, setServerUnreachable] = useState(false);
 	const retryIntervalRef = useRef<number | null>(null);
 
@@ -47,10 +43,6 @@ const AppLayout = ({ children }: AppLayoutProps) => {
 			sx={{
 				minHeight: "100vh",
 				backgroundColor: theme.palette.background.default,
-				backgroundImage: mode === "dark" ? `url("${BackgroundSVG}")` : "none",
-				backgroundSize: "100% 100%",
-				backgroundPosition: "center",
-				backgroundRepeat: "no-repeat",
 			}}
 		>
 			<OfflineBanner visible={serverUnreachable} />

client/src/Utils/Theme/Palette.ts

@@ -12,6 +12,8 @@ export const typographyLevels = {
 export const colors = {
 	gray200: "#EFEFEF",
 	gray700: "#313131",
+	gray900: "#151518",
+	gray850: "#1c1c21",
 	blueBlueWave: "#1570EF",
 };
 
@@ -31,4 +33,8 @@ export const darkPalette = {
 	secondary: {
 		main: colors.gray700,
 	},
+	background: {
+		default: colors.gray900,
+		paper: colors.gray850,
+	},
 };