fix(client): replace lingering hardcoded colours with theme tokens

- Default status-page colour now uses the brand green instead of a royal-blue hex
- PageSpeed API-key alert pulls from theme.palette.warning + alpha for both modes instead of hand-rolled amber values
- Settings JSON preview block uses action.hover instead of the hand-rolled #1e1e1e/#f5f5f5 pair
- Drop the redundant #E0E0E0 thumb override on SwitchComponent so the theme MuiSwitch override actually wins

client/src/Components/design-elements/BasePage.tsx

@@ -15,7 +15,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import { HeaderAuthControls } from "@/Pages/Auth/components/HeaderAuthControls";
 
 import type { StackProps } from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
+import { useTheme, alpha } from "@mui/material/styles";
 import { Trans, useTranslation } from "react-i18next";
 import { Link as RouterLink } from "react-router-dom";
 import { Typography } from "@mui/material";
@@ -23,10 +23,9 @@ import { Typography } from "@mui/material";
 export const PageSpeedKeyPriorityFallback = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
-	const isDark = theme.palette.mode === "dark";
-	const alertBg = isDark ? "rgba(245, 158, 11, 0.08)" : "#FFFAEB";
-	const alertBorder = isDark ? "rgba(245, 158, 11, 0.45)" : "#F59E0B";
-	const alertIcon = isDark ? "#FBBF24" : "#F59E0B";
+	const alertBg = alpha(theme.palette.warning.main, 0.08);
+	const alertBorder = alpha(theme.palette.warning.main, 0.45);
+	const alertIcon = theme.palette.warning.main;
 	return (
 		<EmptyState
 			fullscreen

client/src/Components/inputs/Switch.tsx

@@ -21,24 +21,16 @@ export const SwitchComponent = forwardRef<HTMLInputElement, SwitchComponentProps
 					},
 				}}
 				sx={[
-					{
-						"& .MuiSwitch-switchBase": {
-							"&.Mui-checked": {
-								color: "#E0E0E0",
-								"& + .MuiSwitch-track": {
-									backgroundColor: theme.palette.primary.main,
-									opacity: 1,
-									border: 0,
+					...(dualOption
+						? [
+								{
+									"& .MuiSwitch-track": {
+										backgroundColor: theme.palette.primary.main,
+										opacity: 1,
+									},
 								},
-							},
-						},
-						...(dualOption && {
-							"& .MuiSwitch-track": {
-								backgroundColor: theme.palette.primary.main,
-								opacity: 1,
-							},
-						}),
-					},
+							]
+						: []),
 					...additionalSx,
 				]}
 			/>

client/src/Hooks/useStatusPageForm.ts

@@ -28,7 +28,7 @@ export const useStatusPageForm = ({
 			url: data?.url || generateDefaultUrl(),
 			timezone: data?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
 			type: data?.type || ["uptime"],
-			color: data?.color || "#4169E1",
+			color: data?.color || "#13715B",
 			monitors: data?.monitors || [],
 			isPublished: data?.isPublished ?? false,
 			showCharts: data?.showCharts ?? true,

client/src/Pages/Settings/index.tsx

@@ -584,7 +584,7 @@ export const SettingsPage = () => {
 									p: 2,
 									borderRadius: 1,
 									overflow: "auto",
-									backgroundColor: theme.palette.mode === "dark" ? "#1e1e1e" : "#f5f5f5",
+									backgroundColor: theme.palette.action.hover,
 								}}
 							>
 								<code>