Support Light Theme natively for Streak Modal & iframe

scratch/port_streak_clean.py

@@ -81,6 +81,28 @@ def port_html():
     # 5. Adjust badge size from 230px to 240px
     html = html.replace("--badge:230px;", "--badge:240px;")
 
+    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(() => {
+        if (typeof fadeCol !== 'undefined') {
+          fadeCol = 'rgba(255,255,255,0.22)';
+        }
+      }, 50);
+    }
+  })();
+</script>
+</body>
+    """
+    html = html.replace("</body>", light_theme_script)
+
     with open(dest_path, 'w', encoding='utf-8') as f:
         f.write(html)
     print("Ported successfully to public/streak-animation.html")

src/components/Dashboard/StreakOnboardingModal.tsx

@@ -4,9 +4,11 @@ import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Flame, Sparkles } from "lucide-react";
 import { useActiveUser } from "@/hooks/useActiveUser";
+import { useTheme } from "next-themes";
 
 export function StreakOnboardingModal() {
   const { user, loading } = useActiveUser();
+  const { theme } = useTheme();
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
@@ -54,27 +56,27 @@ export function StreakOnboardingModal() {
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 backdrop-blur-md animate-in fade-in duration-300">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/85 backdrop-blur-md animate-in fade-in duration-300">
       
       {/* Centered Modal Card Container covering 80% screen size (w-[80vw] h-[80vh]) */}
-      <div className="bg-black border border-border/80 shadow-[0_0_60px_-10px_rgba(0,240,255,0.25)] rounded-3xl w-[80vw] max-w-5xl h-[80vh] max-h-[800px] relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start">
+      <div className="bg-background border border-border/80 shadow-[0_0_60px_-10px_rgba(0,240,255,0.25)] rounded-3xl w-[80vw] max-w-5xl h-[80vh] max-h-[800px] relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start">
         
         {/* Subtle background glow */}
         <div className="absolute -right-20 -top-20 size-48 bg-[#00F0FF]/5 rounded-full blur-3xl pointer-events-none" />
         <div className="absolute -left-20 -bottom-20 size-48 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
 
-        {/* Top Celebration Animation Panel (Iframe with height 60%, pure black bg) */}
+        {/* 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-black">
+        <div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-background">
           <iframe
-            src={`/streak-animation.html?streak=${streak}`}
+            src={`/streak-animation.html?streak=${streak}&theme=${theme === 'light' ? 'light' : 'dark'}`}
             className="w-full h-full border-none"
             title="Streak Celebration"
             allowtransparency="true"
           />
         </div>
 
-        {/* Bottom Greetings & Action Panel (height 40%, pure black bg) */}
+        {/* Bottom Greetings & Action Panel (height 40%, matching bg) */}
-        <div className="p-8 text-center flex-1 flex flex-col justify-between bg-black z-20">
+        <div className="p-8 text-center flex-1 flex flex-col justify-between bg-background z-20">
           
           <div className="space-y-4">
             {/* Badge Indicators */}
@@ -98,10 +100,10 @@ export function StreakOnboardingModal() {
             
             {/* Greetings Text */}
             <div className="space-y-3">
-              <h3 className="text-2xl md:text-3xl font-black tracking-tight bg-gradient-to-r from-white via-white to-gray-400 bg-clip-text text-transparent">
+              <h3 className="text-2xl md:text-3xl font-black tracking-tight bg-gradient-to-r dark:from-white dark:via-white dark:to-gray-400 from-black via-black to-gray-600 bg-clip-text text-transparent">
                 {wishTitle}
               </h3>
-              <p className="text-gray-400 text-sm md:text-base leading-relaxed max-w-lg mx-auto">
+              <p className="text-muted-foreground text-sm md:text-base leading-relaxed max-w-lg mx-auto">
                 {wishMessage}
               </p>
             </div>