Support robust theme sync with resolvedTheme and parent check loop

public/streak-animation.html

@@ -397,19 +397,34 @@
 
 <script>
   (function(){
+    setInterval(() => {
+      let isLight = false;
+      try {
+        isLight = window.parent.document.documentElement.classList.contains('light') || 
+                  window.parent.document.documentElement.getAttribute('data-theme') === 'light';
+      } catch (e) {
         const p = new URLSearchParams(window.location.search);
-    if (p.get('theme') === 'light') {
+        isLight = p.get('theme') === 'light';
+      }
+
+      if (isLight) {
         document.body.style.setProperty('background', '#ffffff', 'important');
         document.documentElement.style.setProperty('background', '#ffffff', 'important');
         const b = document.querySelector('.badge');
         if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_light_background.svg') center/cover no-repeat", 'important');
-      // Override trailing color repeatedly so particles look okay in light mode
-      setInterval(() => {
         if (typeof fadeCol !== 'undefined') {
           fadeCol = 'rgba(255,255,255,0.22)';
         }
-      }, 50);
+      } else {
+        document.body.style.setProperty('background', '#000000', 'important');
+        document.documentElement.style.setProperty('background', '#000000', 'important');
+        const b = document.querySelector('.badge');
+        if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_dark_background.svg') center/cover no-repeat", 'important');
+        if (typeof fadeCol !== 'undefined') {
+          fadeCol = 'rgba(0,0,0,0.22)';
         }
+      }
+    }, 100);
   })();
 </script>
     

scratch/port_streak_clean.py

@@ -84,19 +84,34 @@ def port_html():
     light_theme_script = """
 <script>
   (function(){
+    setInterval(() => {
+      let isLight = false;
+      try {
+        isLight = window.parent.document.documentElement.classList.contains('light') || 
+                  window.parent.document.documentElement.getAttribute('data-theme') === 'light';
+      } catch (e) {
         const p = new URLSearchParams(window.location.search);
-    if (p.get('theme') === 'light') {
+        isLight = p.get('theme') === 'light';
+      }
+
+      if (isLight) {
         document.body.style.setProperty('background', '#ffffff', 'important');
         document.documentElement.style.setProperty('background', '#ffffff', 'important');
         const b = document.querySelector('.badge');
         if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_light_background.svg') center/cover no-repeat", 'important');
-      // Override trailing color repeatedly so particles look okay in light mode
-      setInterval(() => {
         if (typeof fadeCol !== 'undefined') {
           fadeCol = 'rgba(255,255,255,0.22)';
         }
-      }, 50);
+      } else {
+        document.body.style.setProperty('background', '#000000', 'important');
+        document.documentElement.style.setProperty('background', '#000000', 'important');
+        const b = document.querySelector('.badge');
+        if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_dark_background.svg') center/cover no-repeat", 'important');
+        if (typeof fadeCol !== 'undefined') {
+          fadeCol = 'rgba(0,0,0,0.22)';
         }
+      }
+    }, 100);
   })();
 </script>
     """

src/components/Dashboard/StreakOnboardingModal.tsx

@@ -8,7 +8,7 @@ import { useTheme } from "next-themes";
 
 export function StreakOnboardingModal() {
   const { user, loading } = useActiveUser();
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
@@ -68,7 +68,7 @@ export function StreakOnboardingModal() {
         {/* Top Celebration Animation Panel (Iframe with height 60%, matching bg) */}
         <div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-background">
           <iframe
-            src={`/streak-animation.html?streak=${streak}&theme=${theme === 'light' ? 'light' : 'dark'}`}
+            src={`/streak-animation.html?streak=${streak}&theme=${resolvedTheme === 'light' ? 'light' : 'dark'}`}
             className="w-full h-full border-none"
             title="Streak Celebration"
             allowtransparency="true"