From 8d104ee30a95cf41bd09f2635b0e77ac10accf87 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 20 Feb 2026 17:59:08 +0000
Subject: [PATCH] remove v1 theme provider

---
 client/src/App.tsx                            |  11 +-
 client/src/Components/v2/layout/AppLayout.tsx |  12 +-
 .../src/Components/v2/layout/RootLayout.tsx   |  11 +-
 client/src/Routes/index.tsx                   | 278 +++---------------
 4 files changed, 45 insertions(+), 267 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index a8a25669e..cbf8ecb3d 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -3,26 +3,23 @@ import { useSelector } from "react-redux";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
 import { ThemeProvider } from "@emotion/react";
-import lightTheme from "./Utils/Theme/lightTheme";
-import darkTheme from "./Utils/Theme/darkTheme";
 import { CssBaseline, GlobalStyles } from "@mui/material";
 import { Routes } from "./Routes";
 import AppLayout from "@/Components/v2/layout/AppLayout";
 import type { RootState } from "@/Types/state";
+import { lightTheme, darkTheme } from "@/Utils/Theme/v2Theme";
 
 function App() {
 	const mode = useSelector((state: RootState) => state.ui.mode);
-
-	const theme = mode === "light" ? lightTheme : darkTheme;
+	const v2theme = mode === "light" ? lightTheme : darkTheme;
 
 	return (
-		<ThemeProvider theme={theme}>
+		<ThemeProvider theme={v2theme}>
 			<CssBaseline />
 			<GlobalStyles
 				styles={{
 					body: {
-						// @ts-ignore
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: v2theme.palette.background.default,
 					},
 				}}
 			/>
diff --git a/client/src/Components/v2/layout/AppLayout.tsx b/client/src/Components/v2/layout/AppLayout.tsx
index 7c9c3c903..437e73260 100644
--- a/client/src/Components/v2/layout/AppLayout.tsx
+++ b/client/src/Components/v2/layout/AppLayout.tsx
@@ -1,10 +1,9 @@
 import Box from "@mui/material/Box";
 import { useState, useEffect, useRef } from "react";
-import { ThemeProvider, useTheme } from "@mui/material/styles";
+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 { lightTheme, darkTheme } from "@/Utils/Theme/v2Theme";
 import { OfflineBanner } from "@/Components/v2/design-elements";
 import { setServerUnreachableCallback, get } from "@/Utils/ApiClient";
 
@@ -15,8 +14,6 @@ interface AppLayoutProps {
 const AppLayout = ({ children }: AppLayoutProps) => {
 	const theme = useTheme();
 	const mode = useSelector((state: RootState) => state.ui.mode);
-	const v2theme = mode === "dark" ? darkTheme : lightTheme;
-
 	const [serverUnreachable, setServerUnreachable] = useState(false);
 	const retryIntervalRef = useRef<number | null>(null);
 
@@ -49,8 +46,7 @@ const AppLayout = ({ children }: AppLayoutProps) => {
 		<Box
 			sx={{
 				minHeight: "100vh",
-				// @ts-expect-error custom palette property
-				backgroundColor: theme.palette.primaryBackground.main,
+				backgroundColor: theme.palette.background.default,
 				backgroundImage: mode === "dark" ? `url("${BackgroundSVG}")` : "none",
 				backgroundSize: "100% 100%",
 				backgroundPosition: "center",
@@ -58,9 +54,7 @@ const AppLayout = ({ children }: AppLayoutProps) => {
 				color: theme.palette.primary.contrastText,
 			}}
 		>
-			<ThemeProvider theme={v2theme}>
-				<OfflineBanner visible={serverUnreachable} />
-			</ThemeProvider>
+			<OfflineBanner visible={serverUnreachable} />
 			{children}
 		</Box>
 	);
diff --git a/client/src/Components/v2/layout/RootLayout.tsx b/client/src/Components/v2/layout/RootLayout.tsx
index 0b6defb91..117c08255 100644
--- a/client/src/Components/v2/layout/RootLayout.tsx
+++ b/client/src/Components/v2/layout/RootLayout.tsx
@@ -4,23 +4,16 @@ import Stack from "@mui/material/Stack";
 import { useMediaQuery } from "@mui/material";
 import { useSidebar } from "@/Hooks/useSidebar";
 
-import { useSelector } from "react-redux";
-import type { RootState } from "@/Types/state";
-import { lightTheme, darkTheme } from "@/Utils/Theme/v2Theme";
-import { ThemeProvider, useTheme } from "@mui/material";
+import { useTheme } from "@mui/material";
 
 const RootLayout = () => {
-	const mode = useSelector((state: RootState) => state.ui.mode);
-	const v2theme = mode === "dark" ? darkTheme : lightTheme;
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const { collapsedWidth } = useSidebar();
 
 	return (
 		<Stack flexDirection="row">
-			<ThemeProvider theme={v2theme}>
-				<Sidebar />
-			</ThemeProvider>
+			<Sidebar />
 			<Stack
 				flex={1}
 				padding={6}
diff --git a/client/src/Routes/index.tsx b/client/src/Routes/index.tsx
index 741e9b6d2..a1b5d907a 100644
--- a/client/src/Routes/index.tsx
+++ b/client/src/Routes/index.tsx
@@ -1,9 +1,3 @@
-// Temp v2 theme
-import { ThemeProvider } from "@mui/material";
-import { lightTheme, darkTheme } from "@/Utils/Theme/v2Theme";
-
-import { useSelector } from "react-redux";
-import type { RootState } from "@/store";
 import { Navigate, Route, Routes as LibRoutes } from "react-router";
 import RootLayout from "@/Components/v2/layout/RootLayout";
 import NotFound from "@/Pages/NotFound";
@@ -60,8 +54,6 @@ import {
 import CreateMonitor from "@/Pages/CreateMonitor";
 
 const Routes = () => {
-	const mode = useSelector((state: RootState) => state.ui.mode);
-	const v2theme = mode === "light" ? lightTheme : darkTheme;
 	return (
 		<LibRoutes>
 			<Route
@@ -78,287 +70,129 @@ const Routes = () => {
 				/>
 				<Route
 					path="/uptime"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<Uptime />
-							</ThemeProvider>
-						</>
-					}
+					element={<Uptime />}
 				/>
 
 				<Route path="/uptime/bulk-import" />
 
 				<Route
 					path="/uptime/create"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateMonitor />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateMonitor />}
 				/>
 				<Route
 					path="/uptime/:monitorId/"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<UptimeDetails />
-							</ThemeProvider>
-						</>
-					}
+					element={<UptimeDetails />}
 				/>
 				<Route
 					path="/uptime/configure/:monitorId/"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateMonitor />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateMonitor />}
 				/>
 
 				<Route
 					path="pagespeed"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<PageSpeed />
-							</ThemeProvider>
-						</>
-					}
+					element={<PageSpeed />}
 				/>
 				<Route
 					path="pagespeed/create"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateMonitor />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateMonitor />}
 				/>
 				<Route
 					path="pagespeed/:monitorId"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<PageSpeedDetails />
-							</ThemeProvider>
-						</>
-					}
+					element={<PageSpeedDetails />}
 				/>
 				<Route
 					path="pagespeed/configure/:monitorId"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateMonitor />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateMonitor />}
 				/>
 				<Route
 					path="infrastructure"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<Infrastructure />
-							</ThemeProvider>
-						</>
-					}
+					element={<Infrastructure />}
 				/>
 				<Route
 					path="infrastructure/create"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateMonitor />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateMonitor />}
 				/>
 				<Route
 					path="/infrastructure/configure/:monitorId"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateMonitor />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateMonitor />}
 				/>
 				<Route
 					path="infrastructure/:monitorId"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<InfrastructureDetails />
-							</ThemeProvider>
-						</>
-					}
+					element={<InfrastructureDetails />}
 				/>
 				<Route
 					path="checks/:monitorId?"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<Checks />
-							</ThemeProvider>
-						</>
-					}
+					element={<Checks />}
 				/>
 				<Route
 					path="incidents/:monitorId?"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<Incidents />
-							</ThemeProvider>
-						</>
-					}
+					element={<Incidents />}
 				/>
 
 				<Route
 					path="status"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<StatusPages />
-							</ThemeProvider>
-						</>
-					}
+					element={<StatusPages />}
 				/>
 
 				<Route
 					path="status/:url"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<Status />
-							</ThemeProvider>
-						</>
-					}
+					element={<Status />}
 				/>
 
 				<Route
 					path="status/create"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateStatus />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateStatus />}
 				/>
 
 				<Route
 					path="status/configure/:url"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateStatus />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateStatus />}
 				/>
 
 				<Route
 					path="notifications"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<Notifications />
-							</ThemeProvider>
-						</>
-					}
+					element={<Notifications />}
 				/>
 				<Route
 					path="notifications/create"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateNotifications />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateNotifications />}
 				/>
 
 				<Route
 					path="notifications/configure/:notificationId"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateNotifications />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateNotifications />}
 				/>
 
 				<Route
 					path="maintenance"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<Maintenance />
-							</ThemeProvider>
-						</>
-					}
+					element={<Maintenance />}
 				/>
 				<Route
 					path="/maintenance/create/:maintenanceWindowId?"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<CreateNewMaintenanceWindow />
-							</ThemeProvider>
-						</>
-					}
+					element={<CreateNewMaintenanceWindow />}
 				/>
 				<Route
 					path="settings"
-					element={
-						<>
-							<ThemeProvider theme={v2theme}>
-								<Settings />
-							</ThemeProvider>
-						</>
-					}
+					element={<Settings />}
 				/>
 
 				<Route
 					path="account/profile"
-					element={
-						<ThemeProvider theme={v2theme}>
-							<Account open={"profile"} />
-						</ThemeProvider>
-					}
+					element={<Account open={"profile"} />}
 				/>
 				<Route
 					path="account/password"
-					element={
-						<ThemeProvider theme={v2theme}>
-							<Account open={"password"} />
-						</ThemeProvider>
-					}
+					element={<Account open={"password"} />}
 				/>
 				<Route
 					path="account/team"
-					element={
-						<ThemeProvider theme={v2theme}>
-							<Account open={"team"} />
-						</ThemeProvider>
-					}
+					element={<Account open={"team"} />}
 				/>
 				<Route
 					path="account/team/:userId"
 					element={
 						<RoleProtectedRoute roles={["superadmin"]}>
-							<ThemeProvider theme={v2theme}>
-								<EditUser />
-							</ThemeProvider>
+							<EditUser />
 						</RoleProtectedRoute>
 					}
 				/>
@@ -367,9 +201,7 @@ const Routes = () => {
 					path="logs"
 					element={
 						<RoleProtectedRoute roles={["admin", "superadmin"]}>
-							<ThemeProvider theme={v2theme}>
-								<Logs />
-							</ThemeProvider>
+							<Logs />
 						</RoleProtectedRoute>
 					}
 				/>
@@ -379,75 +211,37 @@ const Routes = () => {
 				path="/login"
 				element={
 					<>
-						<ThemeProvider theme={v2theme}>
-							<AuthLogin />
-						</ThemeProvider>
+						<AuthLogin />
 					</>
 				}
 			/>
 
 			<Route
 				path="/register"
-				element={
-					<>
-						<ThemeProvider theme={v2theme}>
-							<AuthRegister />
-						</ThemeProvider>
-					</>
-				}
+				element={<AuthRegister />}
 			/>
 
 			<Route
 				path="/register/:token"
-				element={
-					<>
-						<ThemeProvider theme={v2theme}>
-							<AuthRegister />
-						</ThemeProvider>
-					</>
-				}
+				element={<AuthRegister />}
 			/>
 
 			<Route
 				path="/forgot-password"
-				element={
-					<>
-						<ThemeProvider theme={v2theme}>
-							<AuthForgotPassword />
-						</ThemeProvider>
-					</>
-				}
+				element={<AuthForgotPassword />}
 			/>
 			<Route
 				path="/set-new-password/:token"
-				element={
-					<>
-						<ThemeProvider theme={v2theme}>
-							<AuthSetNewPassword />
-						</ThemeProvider>
-					</>
-				}
+				element={<AuthSetNewPassword />}
 			/>
 			<Route
 				path="/status/public/:url"
-				element={
-					<>
-						<ThemeProvider theme={v2theme}>
-							<Status />
-						</ThemeProvider>
-					</>
-				}
+				element={<Status />}
 			/>
 
 			<Route
 				path="*"
-				element={
-					<>
-						<ThemeProvider theme={v2theme}>
-							<NotFound />
-						</ThemeProvider>
-					</>
-				}
+				element={<NotFound />}
 			/>
 		</LibRoutes>
 	);