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.

Author: amdevz

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' : params.theme === 'light' ? 'light' : 'light dark',
     ...styles,
   });