From eb897a2a230f5c4af6537e4d98ccd10ba663d09c Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Tue, 6 Jan 2026 08:09:03 +0100
Subject: [PATCH] refactor: set background colour from content

---
 apps/client/src/views/ViewLoader.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/views/ViewLoader.tsx b/apps/client/src/views/ViewLoader.tsx
index ed5df9db4..9c78db19b 100644
--- a/apps/client/src/views/ViewLoader.tsx
+++ b/apps/client/src/views/ViewLoader.tsx
@@ -10,14 +10,27 @@ export default function ViewLoader({ children }: PropsWithChildren) {
   const { data } = useViewSettings();
   const { shouldRender } = useRuntimeStylesheet(data.overrideStyles ? overrideStylesURL : undefined);
 
+  // we need to be able to override the background colour with the key param
+  const searchParams = new URLSearchParams(window.location.search);
+  const colourFromParams = searchParams.get('keyColour') ?? '#101010';
+
   // eventually we would want to leverage suspense here
   // while the feature is not ready, we simply trigger a loader
   // suspense would have the advantage of being triggered also by react-query
 
   if (!shouldRender) {
-    return <Loader />;
+    return (
+      <>
+        <style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
+        <Loader />
+      </>
+    );
   }
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment -- ensuring JSX return
-  return <>{children}</>;
+  return (
+    <>
+      <style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
+      {children}
+    </>
+  );
 }