(superset) branch master updated: fix(theme): prevent background color flash on page load (#38399)

[el...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

elizabeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new dca41f9a7b8 fix(theme): prevent background color flash on page load (#38399)
dca41f9a7b8 is described below

commit dca41f9a7b8aa6274f048344a23bdc94b4e00e56
Author: Gabriel Torres Ruiz <ga...@gmail.com>
AuthorDate: Mon Mar 9 12:53:38 2026 -0400

    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,