Skip to content

Fix Firefox dark mode white background on comment iframe#2023

Open
amdevz wants to merge 2 commits intoumputun:masterfrom
amdevz:fix/firefox-dark-mode-color-scheme
Open

Fix Firefox dark mode white background on comment iframe#2023
amdevz wants to merge 2 commits intoumputun:masterfrom
amdevz:fix/firefox-dark-mode-color-scheme

Conversation

@amdevz
Copy link
Copy Markdown

@amdevz amdevz commented Mar 21, 2026 •
edited
Loading

Summary

Changes

  • remark.tsx: Sets document.documentElement.style.colorScheme inside the iframe on init and when receiving theme change messages
  • embed.ts: Updates iframe.style.colorScheme when changeTheme() is called at runtime
  • create-iframe.ts: Replaces invalid colorScheme: 'none' with a theme-aware value ('dark', 'light', or 'light dark')

Test plan

  • Open http://127.0.0.1:8080/web/ in Firefox and Chrome
  • Toggle dark mode and verify no white background appears on the iframe in either browser
  • Switch back to light mode and verify it renders correctly
  • Verify changeTheme('dark') and changeTheme('light') in the console both update the iframe canvas color

Before

Firefox

Dark

image

Chromium

Dark

image

After

Firefox

Light

image

Dark

image

Chromium

Light

image

Dark

image

@amdevz amdevz marked this pull request as ready for review March 21, 2026 20:16
@amdevz amdevz requested a review from umputun as a code owner March 21, 2026 20:16
@amdevz @paskal
fix(embed): set color-scheme on iframe to fix Firefox dark mode
3a20bbe 
Firefox renders a white background in dark mode when color-scheme is 'none' on the iframe. Set color-scheme to match the active theme on both the outer iframe element and the inner document root, so Firefox uses the correct rendering mode from the start and on theme changes.
@paskal paskal force-pushed the fix/firefox-dark-mode-color-scheme branch from a5b0310 to 3a20bbe Compare March 25, 2026 21:56
@paskal
Copy link
Copy Markdown
Collaborator

paskal commented Mar 25, 2026

Thanks for the fix, the problem is real - Firefox does handle the invalid color-scheme: none differently from Chrome.

Some context on the history here:

  • #1421 - original dark mode background issue
  • #1427 - Firefox sort select background fix attempt, led to discovering the color-scheme root cause
  • #1429 - colorScheme: 'none' was added intentionally as a workaround to stop browser auto-theming until proper support is implemented
  • #1430 - the plan for full color-scheme support including theme: 'auto'

colorScheme: 'none' is not a valid CSS value, but it worked as a "disable" hack in Chrome. Firefox treating it differently is the actual bug, and your fix for explicit dark/light themes is correct.

One concern with the fallback in create-iframe.ts:

colorScheme: params.theme === 'dark' ? 'dark' : params.theme === 'light' ? 'light' : 'light dark'

When theme is not set (undefined), this falls through to 'light dark', which tells the browser to pick based on prefers-color-scheme. The problem is that the .dark class on body won't be applied, so you'd get a dark canvas with light-themed UI on top - exactly the mismatch that #1429 was meant to prevent.

The fallback should be 'light' instead of 'light dark', matching the default light theme.

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 25, 2026 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 61.89%. Comparing base (06436ff) to head (54231b0).

Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #2023      +/-   ##
==========================================
- Coverage   62.03%   61.89%   -0.15%     
==========================================
  Files         132      132              
  Lines        3037     3044       +7     
  Branches      788      790       +2     
==========================================
  Hits         1884     1884              
- Misses       1039     1156     +117     
+ Partials      114        4     -110

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@amdevz
fix(embed): default iframe color-scheme to light when no theme set
54231b0 
Changes the fallback from 'light dark' to 'light' to match the inner document's default behavior, which always defaults to light when no theme is specified.
@amdevz
Copy link
Copy Markdown
Author

amdevz commented Mar 26, 2026

One concern with the fallback in create-iframe.ts:

colorScheme: params.theme === 'dark' ? 'dark' : params.theme === 'light' ? 'light' : 'light dark'

When theme is not set (undefined), this falls through to 'light dark', which tells the browser to pick based on prefers-color-scheme. The problem is that the .dark class on body won't be applied, so you'd get a dark canvas with light-themed UI on top - exactly the mismatch that #1429 was meant to prevent.

The fallback should be 'light' instead of 'light dark', matching the default light theme.

Of course, thanks for taking a look. That's a valid concern, I think for this PR defaulting to light makes sense. Long term might be best to add auto detection using window.matchMedia potentially if the theme is undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@umputun umputun Awaiting requested review from umputun umputun is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

bug frontend

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

support color-scheme

2 participants

@amdevz @paskal