Add URL param to control background style

src/App.tsx

@@ -30,7 +30,7 @@ import { useTheme } from "./useTheme";
 import { ProcessorProvider } from "./livekit/TrackProcessorContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
-import { getUrlParams, HeaderStyle } from "./UrlParams";
+import { getUrlParams, HeaderStyle, useUrlParams } from "./UrlParams";
 import { AppBar } from "./AppBar";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
@@ -41,19 +41,17 @@ interface SimpleProviderProps {
 
 const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
+  const { background } = useUrlParams();
 
   useEffect(() => {
-    let backgroundImage = "";
-    if (!["/login", "/register"].includes(pathname) && !widget) {
-      backgroundImage = "var(--background-gradient)";
-    }
+    document
+      .getElementsByTagName("body")[0]
+      .setAttribute("data-background", background);
+  }, [pathname, background]);
 
-    document.getElementsByTagName("body")[0].style.backgroundImage =
-      backgroundImage;
-  }, [pathname]);
-
-  return <>{children}</>;
+  return children;
 };
+
 const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
   useTheme();
   return children;

src/UrlParams.ts

@@ -45,6 +45,11 @@ export enum HeaderStyle {
   AppBar = "app_bar",
 }
 
+export enum BackgroundStyle {
+  Solid = "solid",
+  Gradient = "gradient",
+}
+
 /**
  * The UrlProperties are used to pass required data to the widget.
  * Those are different in different rooms, users, devices. They do not configure the behavior of the
@@ -145,6 +150,10 @@ export interface UrlProperties {
    * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
    */
   theme: string | null;
+  /**
+   * The visual style of the page background.
+   */
+  background: BackgroundStyle;
 }
 
 /**
@@ -452,6 +461,9 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     theme: parser.getParam("theme"),
+    background:
+      parser.getEnumParam("background", BackgroundStyle) ??
+      BackgroundStyle.Gradient,
     viaServers: !isWidget ? parser.getParam("viaServers") : null,
     homeserver: !isWidget ? parser.getParam("homeserver") : null,
     posthogApiHost: parser.getParam("posthogApiHost"),

src/index.css

@@ -74,9 +74,7 @@ layer(compound);
 
 body {
   background-color: var(--cpd-color-bg-canvas-default);
-  background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
   background-repeat: no-repeat;
-  background-position: center;
   color: var(--cpd-color-text-primary);
   color-scheme: dark;
   margin: 0;
@@ -85,6 +83,12 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+body[data-background="gradient"] {
+  background-image: var(--background-gradient);
+  background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
+  background-position: center;
+}
+
 /* This prohibits the view to scroll for pages smaller than 122px in width
 we use this for mobile pip webviews */
 .no-scroll-body {