npm - @proveanything/smartlinks-auth-ui - Versions diffs - 0.5.20 → 0.5.22 - Mend

@proveanything/smartlinks-auth-ui 0.5.20 → 0.5.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/components/SmartlinksAuthUI.d.ts.map +1 -1
package/dist/index.esm.js +34 -3
package/dist/index.esm.js.map +1 -1
package/dist/index.js +34 -3
package/dist/index.js.map +1 -1
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -13560,17 +13560,48 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         }
     };
     // Dark mode detection and theme management
+    // In 'auto' mode we honor (in priority order):
+    //   1. An explicit `.dark` class on <html> or <body> (set by the host portal / SmartLinks theme system)
+    //   2. A SmartLinks theme payload in the URL (?theme=... with m === 'd')
+    //   3. The OS `prefers-color-scheme` preference
     React.useEffect(() => {
         if (theme !== 'auto') {
             setResolvedTheme(theme);
             return;
         }
-        // Auto-detect system theme preference
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const updateTheme = () => setResolvedTheme(mediaQuery.matches ? 'dark' : 'light');
+        const hostHasDarkClass = () => document.documentElement.classList.contains('dark') ||
+            document.body.classList.contains('dark');
+        const urlRequestsDark = () => {
+            try {
+                const search = new URLSearchParams(window.location.search);
+                let themeParam = search.get('theme');
+                if (!themeParam && window.location.hash.includes('?')) {
+                    themeParam = new URLSearchParams(window.location.hash.substring(window.location.hash.indexOf('?'))).get('theme');
+                }
+                if (!themeParam)
+                    return false;
+                const decoded = JSON.parse(atob(themeParam));
+                return decoded?.m === 'd';
+            }
+            catch {
+                return false;
+            }
+        };
+        const updateTheme = () => {
+            const isDark = hostHasDarkClass() || urlRequestsDark() || mediaQuery.matches;
+            setResolvedTheme(isDark ? 'dark' : 'light');
+        };
         updateTheme();
         mediaQuery.addEventListener('change', updateTheme);
-        return () => mediaQuery.removeEventListener('change', updateTheme);
+        // Watch host <html>/<body> class changes (portal toggling dark mode at runtime)
+        const observer = new MutationObserver(updateTheme);
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+        observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+        return () => {
+            mediaQuery.removeEventListener('change', updateTheme);
+            observer.disconnect();
+        };
     }, [theme]);
     // Version tracking for debugging if needed
     // console.log(`${LOG_PREFIX} Component mounted, v${AUTH_UI_VERSION}`);