fix(theme): prevent background color flash on page load (#38399)

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('; '));
       }

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

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,