diff --git a/public/streak-animation.html b/public/streak-animation.html
index 8487cd3..624c7d0 100644
--- a/public/streak-animation.html
+++ b/public/streak-animation.html
@@ -397,19 +397,34 @@
 
 <script>
   (function(){
-    const p = new URLSearchParams(window.location.search);
-    if (p.get('theme') === 'light') {
-      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(() => {
+    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);
+        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');
         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>
     
\ No newline at end of file
diff --git a/scratch/port_streak_clean.py b/scratch/port_streak_clean.py
index b15fbe3..ba926e4 100644
--- a/scratch/port_streak_clean.py
+++ b/scratch/port_streak_clean.py
@@ -84,19 +84,34 @@ def port_html():
     light_theme_script = """
 <script>
   (function(){
-    const p = new URLSearchParams(window.location.search);
-    if (p.get('theme') === 'light') {
-      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(() => {
+    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);
+        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');
         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>
     """
diff --git a/src/components/Dashboard/StreakOnboardingModal.tsx b/src/components/Dashboard/StreakOnboardingModal.tsx
index 74ed501..06a5fab 100644
--- a/src/components/Dashboard/StreakOnboardingModal.tsx
+++ b/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"