Fix Firefox dark mode white background on comment iframe by amdevz · Pull Request #2023 · umputun/remark42

amdevz · 2026-03-21T20:00:34Z

Summary

Firefox renders a white background on the comment iframe in dark mode because color-scheme: none is not a valid CSS value. Chrome silently ignores it, but Firefox treats it literally and uses the default light canvas.
Sets color-scheme on the iframe's inner <html> element to match the active theme (dark or light), which tells Firefox to use the correct canvas color.
Also updates the outer <iframe> element's color-scheme on creation and on runtime theme changes via changeTheme().
Resolves support color-scheme #1430, iframe background pure white on firefox (even in dark mode) #2011, and builds on the groundwork from fix: sort select background in dark mode #1427 and disable color-scheme on remark iframe #1429.

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

Chromium

Dark

After

Firefox

Light

Dark

Chromium

Light

Dark

paskal · 2026-03-25T22:06:32Z

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 · 2026-03-25T22:22:30Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 62.14%. Comparing base (fc6f155) to head (464e814).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2023      +/-   ##
==========================================
- Coverage   62.28%   62.14%   -0.15%     
==========================================
  Files         133      133              
  Lines        3031     3038       +7     
  Branches      741      743       +2     
==========================================
  Hits         1888     1888              
- Misses       1139     1146       +7     
  Partials        4        4

☔ 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 · 2026-03-26T06:42:01Z

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

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.

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 marked this pull request as ready for review March 21, 2026 20:16

amdevz requested a review from umputun as a code owner March 21, 2026 20:16

paskal force-pushed the fix/firefox-dark-mode-color-scheme branch from a5b0310 to 3a20bbe Compare March 25, 2026 21:56

paskal added frontend bug labels Mar 25, 2026

amdevz added 2 commits April 14, 2026 01:59

fix(embed): default iframe color-scheme to light when no theme set

464e814

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.

paskal force-pushed the fix/firefox-dark-mode-color-scheme branch from 54231b0 to 464e814 Compare April 13, 2026 23:59

paskal approved these changes Apr 14, 2026

View reviewed changes

paskal mentioned this pull request Apr 14, 2026

support color-scheme #1430

Open

umputun merged commit 7ec5af8 into umputun:master Apr 14, 2026
8 of 9 checks passed

paskal mentioned this pull request Apr 14, 2026

fix: sort select background in dark mode #1427

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix Firefox dark mode white background on comment iframe#2023

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

amdevz commented Mar 21, 2026 •

edited

Loading

Uh oh!

paskal commented Mar 25, 2026

Uh oh!

codecov Bot commented Mar 25, 2026 •

edited

Loading

Uh oh!

amdevz commented Mar 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

amdevz commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test plan

Before

Firefox

Dark

Chromium

Dark

After

Firefox

Light

Dark

Chromium

Light

Dark

Uh oh!

paskal commented Mar 25, 2026

Uh oh!

codecov Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

amdevz commented Mar 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

amdevz commented Mar 21, 2026 •

edited

Loading

codecov Bot commented Mar 25, 2026 •

edited

Loading