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

@@ -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 });
   }
 

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();

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,
   });