From dca41f9a7b8aa6274f048344a23bdc94b4e00e56 Mon Sep 17 00:00:00 2001
From: Gabriel Torres Ruiz <gabo2595@gmail.com>
Date: Mon, 9 Mar 2026 12:53:38 -0400
Subject: [PATCH] fix(theme): prevent background color flash on page load
 (#38399)

---
 superset-embedded-sdk/src/index.ts   |  1 +
 superset/templates/superset/spa.html | 32 +++++++++++++++++++++-------
 superset/views/base.py               |  5 +++++
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts
index 419ed2526ec..e732a36c22f 100644
--- a/superset-embedded-sdk/src/index.ts
+++ b/superset-embedded-sdk/src/index.ts
@@ -232,6 +232,7 @@ export async function embedDashboard({
       });
       iframe.src = `${supersetDomain}/embedded/${id}${urlParamsString}`;
       iframe.title = iframeTitle;
+      iframe.style.background = 'transparent';
       if (iframeAllowExtras.length > 0) {
         iframe.setAttribute('allow', iframeAllowExtras.join('; '));
       }
diff --git a/superset/templates/superset/spa.html b/superset/templates/superset/spa.html
index 8ca114b3cf3..40f5af6f34f 100644
--- a/superset/templates/superset/spa.html
+++ b/superset/templates/superset/spa.html
@@ -35,19 +35,35 @@
     {% endblock %}
 
     <style>
+      {% if entry == 'embedded' %}
+      html, body {
+        background: transparent !important;
+      }
+      {% else %}
       body {
-        background: #fff;
+        background: {{ theme_tokens.colorBgBase | default('#fff') }};
         color: #000;
       }
-
-      @media (prefers-color-scheme: dark) {
-        body {
-          background: #000;
-          color: #fff;
-        }
-      }
+      {% endif %}
     </style>
 
+    {% if dark_theme_bg and entry != 'embedded' %}
+    <script nonce="{{ macros.get_nonce() }}">
+      (function() {
+        try {
+          var mode = localStorage.getItem('superset-theme-mode');
+          var shouldBeDark = mode === 'dark' ||
+            (mode !== 'default' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+          if (shouldBeDark) {
+            var s = document.createElement('style');
+            s.textContent = 'body{background:{{ dark_theme_bg }};color:#fff}';
+            document.head.appendChild(s);
+          }
+        } catch(e) {}
+      })();
+    </script>
+    {% endif %}
+
     {% block head_css %}
       {% for favicon in favicons %}
         <link
diff --git a/superset/views/base.py b/superset/views/base.py
index 15b35d94374..6e3f44c9aa7 100644
--- a/superset/views/base.py
+++ b/superset/views/base.py
@@ -619,12 +619,17 @@ def get_spa_template_context(
     # Determine default title using the (potentially updated) brandAppName
     default_title = theme_tokens.get("brandAppName", "Superset")
 
+    # Extract dark theme background for the initial page load CSS.
+    dark_theme_tokens = dark_theme.get("token", {}) if dark_theme else {}
+    dark_theme_bg = dark_theme_tokens.get("colorBgBase", "#000") if dark_theme else None
+
     return {
         "entry": entry,
         "bootstrap_data": json.dumps(
             payload, default=json.pessimistic_json_iso_dttm_ser
         ),
         "theme_tokens": theme_tokens,
+        "dark_theme_bg": dark_theme_bg,
         "spinner_svg": spinner_svg,
         "default_title": default_title,
         **template_kwargs,