gabotorresruiz opened a new pull request, #38399: URL: https://github.com/apache/superset/pull/38399
<!--- Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/ Example: fix(dashboard): load charts correctly --> ### SUMMARY <!--- Describe the change below, including rationale and design decisions --> This PR fixes background color flashes during page load: **- Embedded dashboards:** The iframe showed a black background for a few seconds before the parent app's theme arrived. The fix makes embedded iframes transparent from the first paint so the parent app's background shows through seamlessly. **- Main Superset app:** The hardcoded `@media (prefers-color-scheme: dark)` media query only matched OS preference, not the user's actual Superset theme mode, causing mismatches (e.g., black flash for dark OS users with Superset set to light mode). The fix replaces it with an inline script that reads the real theme mode from localStorage and applies the correct theme `colorBgBase` before any content paints. ### TESTING INSTRUCTIONS <!--- Required! What steps can be taken to manually verify the changes? --> Setup for Tests 1-2: You need an app that embeds a Superset dashboard using `@superset-ui/embedded-sdk` **Test 1: Embedded - dark OS + light theme (original bug)** 1. Set your OS to dark mode 2. In your embedding app, call `embedDashboard()` and then `setThemeConfig()` with a light theme 3. Hard reload the page (Cmd+Shift+R / Ctrl+Shift+R) 4. Watch the iframe area during the loading phase 5. **Expected:** The iframe is transparent (parent app's background shows through) until the dashboard renders with the light theme. No black flash. **Test 2: Embedded - light OS** 1. Set your OS to light mode 2. Same setup as Test 1 3. Hard reload the page 4. **Expected:** Same transparent loading behavior, dashboard renders with the light theme as before **Test 3: Main app - dark OS + default (light) mode** 1. Set your OS to dark mode 2. In Superset, set theme mode to Default (light) 3. Hard reload 4. **Expected:** Light background appears immediately during page load. No black flash. **Test 4: Main app - dark mode** 1. In Superset, set theme mode to Dark 2. Hard reload 3. **Expected:** Dark background appears immediately during page load. No white flash. **Test 5: Main app - system mode** 1. In Superset, set theme mode to System 2. Toggle OS between light and dark mode, hard reloading each time 3. **Expected:** Background matches OS preference immediately on each reload. No flash. ### ADDITIONAL INFORMATION <!--- Check any relevant boxes with "x" --> <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue --> - [ ] Has associated issue: - [ ] Required feature flags: - [x] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [ ] Introduces new feature or API - [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
