add useEffect hook to set theme to dark, restore to original mode on exit

src/Features/UI/uiSlice.js

@@ -53,8 +53,8 @@ const uiSlice = createSlice({
 			state.timezone = action.payload.timezone;
 		},
 		setLanguage(state, action) {
-            state.language = action.payload;
-        },
+			state.language = action.payload;
+		},
 	},
 });
 

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -18,10 +18,11 @@ import InfoBox from "../../../Components/InfoBox";
 import StatusHeader from "../../DistributedUptime/Details/Components/StatusHeader";
 import MonitorsList from "./Components/MonitorsList";
 import { RowContainer } from "../../../Components/StandardContainer";
+import ThemeSwitch from "../../../Components/ThemeSwitch";
 
 //Utils
 import { useTheme } from "@mui/material/styles";
-import { useState, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
 import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails";
 import { useDUStatusPageFetchByUrl } from "./Hooks/useDUStatusPageFetchByUrl";
@@ -31,6 +32,8 @@ import SubHeader from "../../../Components/Subheader";
 import { safelyParseFloat } from "../../../Utils/utils";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { useSelector, useDispatch } from "react-redux";
+import { setMode } from "../../../Features/UI/uiSlice";
 
 // Responsive
 import { useMediaQuery } from "@mui/material";
@@ -40,8 +43,12 @@ const DistributedUptimeStatus = () => {
 	const location = useLocation();
 	const { t } = useTranslation();
 	const isPublic = location.pathname.startsWith("/status/distributed/public");
-
 	const elementToCapture = useRef(null);
+
+	// Redux state
+	const mode = useSelector((state) => state.ui.mode);
+	const originalModeRef = useRef(null);
+
 	// Local State
 	const [dateRange, setDateRange] = useState("day");
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
@@ -50,6 +57,7 @@ const DistributedUptimeStatus = () => {
 	const theme = useTheme();
 	const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
 	const navigate = useNavigate();
+	const dispatch = useDispatch();
 
 	const [
 		statusPageIsLoading,
@@ -85,6 +93,28 @@ const DistributedUptimeStatus = () => {
 		};
 	}
 
+	// Default to dark mode
+	useEffect(() => {
+		const cleanup = () => {
+			if (originalModeRef.current === null) {
+				originalModeRef.current = mode;
+			}
+
+			if (isPublic) {
+				dispatch(setMode(originalModeRef.current));
+			}
+		};
+
+		if (isPublic) {
+			dispatch(setMode("dark"));
+		}
+
+		window.addEventListener("beforeunload", cleanup);
+		return () => {
+			window.removeEventListener("beforeunload", cleanup);
+		};
+	}, [dispatch, isPublic]);
+
 	// Done loading, a status page doesn't exist
 	if (!statusPageIsLoading && typeof statusPage === "undefined") {
 		return (
@@ -158,9 +188,10 @@ const DistributedUptimeStatus = () => {
 			}}
 		>
 			{!isPublic && <Breadcrumbs list={BREADCRUMBS} />}
+
 			<ControlsHeader
-				shouldShow={!isPublic}
 				statusPage={statusPage}
+				isPublic={isPublic}
 				isDeleting={isDeleting}
 				isDeleteOpen={isDeleteOpen}
 				setIsDeleteOpen={setIsDeleteOpen}