fix(modal): update styles for modal and buttons, improve theme handling

src/features/misc/sections/Changelog.jsx

@@ -1,15 +1,29 @@
 import variables from 'config/variables';
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { MdOutlineWifiOff } from 'react-icons/md';
 
 const Changelog = () => {
   const [isLoading, setIsLoading] = useState(true);
+  const iframeRef = useRef(null);
 
   const offlineMode = localStorage.getItem('offlineMode') === 'true';
   const isOffline = navigator.onLine === false || offlineMode;
 
   const handleLoad = () => {
     setIsLoading(false);
+
+    // Send theme to iframe after it loads
+    if (iframeRef.current?.contentWindow) {
+      const theme = localStorage.getItem('theme') || 'auto';
+      const blogOrigin = new URL(variables.constants.CHANGELOG_URL).origin;
+      iframeRef.current.contentWindow.postMessage(
+        {
+          type: 'mue:theme',
+          payload: { theme },
+        },
+        blogOrigin
+      );
+    }
   };
 
   // Show offline error message if offline
@@ -45,7 +59,11 @@ const Changelog = () => {
         </div>
       )}
       <iframe
-        src={variables.constants.CHANGELOG_URL + '?embed=true'}
+        ref={iframeRef}
+        src={(() => {
+          const theme = localStorage.getItem('theme') || 'auto';
+          return `${variables.constants.CHANGELOG_URL}?embed=true&theme=${theme}`;
+        })()}
         onLoad={handleLoad}
         style={{
           width: '100%',

src/features/misc/views/Discover.jsx

@@ -38,13 +38,17 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
       onBreadcrumbsChange([]);
     }
 
+    // Get current theme
+    const theme = localStorage.getItem('theme') || 'auto';
+    const themeParam = `&theme=${theme}`;
+
     // Update iframe src with category
     if (iframeRef.current) {
       // Collections use path-based routing, others use query params
       if (category === 'collections') {
-        iframeRef.current.src = `${MARKETPLACE_URL}/collections?embed=true${previewParam}`;
+        iframeRef.current.src = `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`;
       } else {
-        iframeRef.current.src = `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}`;
+        iframeRef.current.src = `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}${themeParam}`;
       }
     }
   }, [category, onBreadcrumbsChange, previewParam]);
@@ -59,6 +63,10 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
       if (itemId && iframeRef.current) {
         setIsLoading(true);
 
+        // Get current theme
+        const theme = localStorage.getItem('theme') || 'auto';
+        const themeParam = `&theme=${theme}`;
+
         // Get item from localStorage to determine type
         const installed = JSON.parse(localStorage.getItem('installed')) || [];
         const item = installed.find((i) => i.name === itemId);
@@ -75,10 +83,10 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
           const itemIdToUse = item.id || itemId;
 
           // Navigate to /packs/{id} or /presets/{id}
-          iframeRef.current.src = `${MARKETPLACE_URL}/${pathSegment}/${itemIdToUse}?embed=true${previewParam}`;
+          iframeRef.current.src = `${MARKETPLACE_URL}/${pathSegment}/${itemIdToUse}?embed=true${previewParam}${themeParam}`;
         } else {
           // Fallback if item not found in localStorage
-          iframeRef.current.src = `${MARKETPLACE_URL}/packs/${itemId}?embed=true${previewParam}`;
+          iframeRef.current.src = `${MARKETPLACE_URL}/packs/${itemId}?embed=true${previewParam}${themeParam}`;
         }
       }
     };
@@ -186,6 +194,18 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
 
   const handleLoad = () => {
     setIsLoading(false);
+
+    // Send theme to iframe after it loads
+    if (iframeRef.current?.contentWindow) {
+      const theme = localStorage.getItem('theme') || 'auto';
+      iframeRef.current.contentWindow.postMessage(
+        {
+          type: 'marketplace:theme',
+          payload: { theme },
+        },
+        MARKETPLACE_URL
+      );
+    }
   };
 
   // Show offline error message if offline
@@ -232,7 +252,13 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
       )}
       <iframe
         ref={iframeRef}
-        src={category === 'collections' ? `${MARKETPLACE_URL}/collections?embed=true${previewParam}` : `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}`}
+        src={(() => {
+          const theme = localStorage.getItem('theme') || 'auto';
+          const themeParam = `&theme=${theme}`;
+          return category === 'collections'
+            ? `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`
+            : `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}${themeParam}`;
+        })()}
         onLoad={handleLoad}
         scrolling="no"
         style={{