diff --git a/src/index.css b/src/index.css
index 039b2a42..a11a69ed 100644
--- a/src/index.css
+++ b/src/index.css
@@ -85,6 +85,25 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+/* [lotus] When embedded in the Lotus host with lotusTransparent=1, make the
+app background transparent so the host's wallpaper shows through natively —
+replacing the host's injected `html, body { background: none !important }`
+override. */
+body.lotus-transparent,
+body.lotus-transparent #root {
+  background: transparent !important;
+}
+
+/* [lotus] Native Lotus/TDS theme, applied when lotusTheme=1, instead of the
+host injecting CSS into the iframe after load. Overrides Compound design tokens
+with Lotus values at the source so theming is complete and flash-free. Extend
+this block with the full Lotus token map from the design system; the canvas
+override below is a safe starting point that matches the Lotus dark surface. */
+body.lotus-theme {
+  --cpd-color-bg-canvas-default: #0c0d10;
+  --video-tile-background: var(--cpd-color-bg-subtle-secondary);
+}
+
 /* This prohibits the view to scroll for pages smaller than 122px in width
 we use this for mobile pip webviews */
 .no-scroll-body {
diff --git a/src/useTheme.ts b/src/useTheme.ts
index e992aee7..daf85016 100644
--- a/src/useTheme.ts
+++ b/src/useTheme.ts
@@ -11,6 +11,7 @@ import { type IThemeChangeActionRequest } from "matrix-widget-api";
 
 import { getUrlParams } from "./UrlParams";
 import { widget } from "./widget";
+import { lotusFlag } from "./lotus/lotusWidget";
 
 export const useTheme = (): void => {
   const [requestedTheme, setRequestedTheme] = useState(
@@ -57,5 +58,10 @@ export const useTheme = (): void => {
       previousTheme.current = themeString;
     }
     document.body.classList.remove("no-theme");
+    // [lotus #5] Native theming hooks, opted in by the host via URL flags, so
+    // it no longer has to inject CSS into the iframe after load.
+    if (lotusFlag("lotusTransparent"))
+      document.body.classList.add("lotus-transparent");
+    if (lotusFlag("lotusTheme")) document.body.classList.add("lotus-theme");
   }, [previousTheme, requestedTheme]);
 };