From 7ec5af8068c8f6c8ae42baa45af1e667d79eb82c Mon Sep 17 00:00:00 2001
From: Amir Mohamad <86855082+amdevz@users.noreply.github.com>
Date: Tue, 14 Apr 2026 16:35:41 -0400
Subject: [PATCH] Fix Firefox dark mode white background on comment iframe
 (#2023)

* fix(embed): set color-scheme on iframe to fix Firefox dark mode

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.

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

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.
---
 frontend/apps/remark42/app/embed.ts               | 1 +
 frontend/apps/remark42/app/remark.tsx             | 5 +++++
 frontend/apps/remark42/app/utils/create-iframe.ts | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/apps/remark42/app/embed.ts b/frontend/apps/remark42/app/embed.ts
index e444ac52..ae1a6eea 100644
--- a/frontend/apps/remark42/app/embed.ts
+++ b/frontend/apps/remark42/app/embed.ts
@@ -116,6 +116,7 @@ function createInstance(config: typeof window.remark_config) {
 
   function changeTheme(theme: Theme) {
     window.remark_config.theme = theme;
+    iframe.style.colorScheme = theme;
     postMessageToIframe(iframe, { theme });
   }
 
diff --git a/frontend/apps/remark42/app/remark.tsx b/frontend/apps/remark42/app/remark.tsx
index 98a96941..c129071a 100644
--- a/frontend/apps/remark42/app/remark.tsx
+++ b/frontend/apps/remark42/app/remark.tsx
@@ -40,15 +40,20 @@ async function init(): Promise<void> {
 
     if (data.theme === 'light') {
       document.body.classList.remove('dark');
+      document.documentElement.style.colorScheme = 'light';
     }
 
     if (data.theme === 'dark') {
       document.body.classList.add('dark');
+      document.documentElement.style.colorScheme = 'dark';
     }
   });
 
   if (theme === 'dark') {
     document.body.classList.add('dark');
+    document.documentElement.style.colorScheme = 'dark';
+  } else {
+    document.documentElement.style.colorScheme = 'light';
   }
 
   boundActions.fetchHiddenUsers();
diff --git a/frontend/apps/remark42/app/utils/create-iframe.ts b/frontend/apps/remark42/app/utils/create-iframe.ts
index bd577453..6f694113 100644
--- a/frontend/apps/remark42/app/utils/create-iframe.ts
+++ b/frontend/apps/remark42/app/utils/create-iframe.ts
@@ -20,7 +20,7 @@ export function createIframe({ __colors__, styles, ...params }: Params) {
     padding: 0,
     margin: 0,
     overflow: 'hidden',
-    colorScheme: 'none',
+    colorScheme: params.theme === 'dark' ? 'dark' : 'light',
     ...styles,
   });