Support robust theme sync with resolvedTheme and parent check loop

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"