From 4e6cda939d2b50a2f4dbd50203423a47e331218a Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Mon, 8 Jun 2026 08:00:48 -0400
Subject: [PATCH] fix(embed): transparent background via dedicated Embed theme
 instead of inline CSS variable override

---
 .../Layout/EmbedLayout.razor                  |  2 +-
 .../Common/DeepDrftPalettes.cs                | 68 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/DeepDrftPublic.Client/Layout/EmbedLayout.razor b/DeepDrftPublic.Client/Layout/EmbedLayout.razor
index 87a2efa..2bb7a05 100644
--- a/DeepDrftPublic.Client/Layout/EmbedLayout.razor
+++ b/DeepDrftPublic.Client/Layout/EmbedLayout.razor
@@ -7,7 +7,7 @@
 @inherits LayoutComponentBase
 @implements IDisposable
 
-<MudThemeProvider Theme="@DeepDrftPalettes.Default" IsDarkMode="_isDarkMode" />
+<MudThemeProvider Theme="@DeepDrftPalettes.Embed" IsDarkMode="_isDarkMode" />
 <div class="@ThemeWrapperClass">
     <MudLayout Style="display: flex; flex-direction: column; min-height: 100vh">
         <AudioPlayerProvider>
diff --git a/DeepDrftShared.Client/Common/DeepDrftPalettes.cs b/DeepDrftShared.Client/Common/DeepDrftPalettes.cs
index bbc9f5e..18978a3 100644
--- a/DeepDrftShared.Client/Common/DeepDrftPalettes.cs
+++ b/DeepDrftShared.Client/Common/DeepDrftPalettes.cs
@@ -74,6 +74,34 @@ public static class DeepDrftPalettes
         // Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
     };
 
+    // Embed light palette — identical to Light but Background is transparent so
+    // the embedding page shows through.
+    public static PaletteLight EmbedLight { get; } = new()
+    {
+        Primary = Light.Primary,
+        PrimaryDarken = Light.PrimaryDarken,
+        Secondary = Light.Secondary,
+        Tertiary = Light.Tertiary,
+        Background = "rgba(0,0,0,0)",        // transparent
+        BackgroundGray = Light.BackgroundGray,
+        Surface = Light.Surface,
+        AppbarBackground = Light.AppbarBackground,
+        AppbarText = Light.AppbarText,
+        TextPrimary = Light.TextPrimary,
+        TextSecondary = Light.TextSecondary,
+        TextDisabled = Light.TextDisabled,
+        ActionDefault = Light.ActionDefault,
+        ActionDisabled = Light.ActionDisabled,
+        ActionDisabledBackground = Light.ActionDisabledBackground,
+        Divider = Light.Divider,
+        DividerLight = Light.DividerLight,
+        TableLines = Light.TableLines,
+        LinesDefault = Light.LinesDefault,
+        LinesInputs = Light.LinesInputs,
+        OverlayLight = Light.OverlayLight,
+        OverlayDark = Light.OverlayDark,
+    };
+
     // Wireframe dark palette - navy ground / green-accent / off-white.
     // Mirrors the light palette's vocabulary on a dark ground; the coral/lowcountry
     // identity has been retired. On dark, green-accent (#3D7A68) becomes the primary
@@ -109,6 +137,35 @@ public static class DeepDrftPalettes
         // Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
     };
 
+    // Embed dark palette — identical to Dark but Background is transparent.
+    public static PaletteDark EmbedDark { get; } = new()
+    {
+        Primary = Dark.Primary,
+        PrimaryDarken = Dark.PrimaryDarken,
+        Secondary = Dark.Secondary,
+        Tertiary = Dark.Tertiary,
+        Background = "rgba(0,0,0,0)",        // transparent
+        Surface = Dark.Surface,
+        AppbarBackground = Dark.AppbarBackground,
+        AppbarText = Dark.AppbarText,
+        DrawerBackground = Dark.DrawerBackground,
+        DrawerText = Dark.DrawerText,
+        DrawerIcon = Dark.DrawerIcon,
+        TextPrimary = Dark.TextPrimary,
+        TextSecondary = Dark.TextSecondary,
+        TextDisabled = Dark.TextDisabled,
+        ActionDefault = Dark.ActionDefault,
+        ActionDisabled = Dark.ActionDisabled,
+        ActionDisabledBackground = Dark.ActionDisabledBackground,
+        Divider = Dark.Divider,
+        DividerLight = Dark.DividerLight,
+        TableLines = Dark.TableLines,
+        LinesDefault = Dark.LinesDefault,
+        LinesInputs = Dark.LinesInputs,
+        OverlayLight = Dark.OverlayLight,
+        OverlayDark = Dark.OverlayDark,
+    };
+
     // Shared typography - Cormorant Garamond for display, Geist Mono for mono, DM Sans for body.
     public static Typography Typography { get; } = new()
     {
@@ -148,5 +205,16 @@ public static class DeepDrftPalettes
         PaletteDark = Dark,
         Typography = Typography,
     };
+
+    /// <summary>
+    /// Embed MudTheme — identical to <see cref="Default"/> but with transparent
+    /// Background on both palettes so the embedding page shows through the root.
+    /// </summary>
+    public static MudTheme Embed { get; } = new()
+    {
+        PaletteLight = EmbedLight,
+        PaletteDark = EmbedDark,
+        Typography = Typography,
+    };
 }
 #pragma warning restore CS8601