chore(frontend): add dynamic theme color support

frontend-new/src/app/Layout.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from "react";
 import { Box } from "@mui/material";
 import { Outlet, useMatches } from "react-router-dom";
+import useThemeColor from "src/branding/useThemeColor";
+import { getThemeCssVariables } from "src/envService";
 import { useTranslation } from "react-i18next";
 import type { TranslationKey } from "src/react-i18next";
 import NavBar from "src/navigation/NavBar/NavBar";
@@ -46,6 +48,12 @@ const Layout: React.FC = () => {
     };
   }, [matches]);
 
+  // Sync browser theme-color to the page's top section; raw RGB values needed — theme.palette returns CSS var refs.
+  const themeCssVariables = getThemeCssVariables();
+  const cssVarKey = headerColor === "navMain" ? "nav-main-background" : `brand-${headerColor}`;
+  const rawColor = themeCssVariables[cssVarKey as keyof typeof themeCssVariables];
+  useThemeColor(rawColor ? `rgb(${rawColor.split(" ").join(", ")})` : undefined);
+
   return (
     <UserProfileProvider>
       <RebuildProfileProvider>

frontend-new/src/branding/useThemeColor.ts

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+/**
+ * Updates the browser's theme-color meta tag to match the top section background of the current page.
+ * Restores the previous color when the component unmounts (e.g. on route change).
+ *
+ * @param color - any valid CSS color string, e.g. "#002147" or "rgb(0, 33, 71)"
+ */
+const useThemeColor = (color: string | undefined) => {
+  useEffect(() => {
+    if (!color) return;
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (!(meta instanceof HTMLMetaElement)) return;
+
+    meta.content = color;
+
+    return () => {
+      meta.content = "#fff";
+    };
+  }, [color]);
+};
+
+export default useThemeColor;