From f0b571a1b260759e8689d2b45f51c688bdc77dfd Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Wed, 18 Feb 2026 15:19:59 +0100
Subject: [PATCH] updated background for fireflies and nebula

---
 frontend/src/components/FirefliesBanner.tsx | 16 ++++++++++++++--
 frontend/src/components/NebulaBanner.tsx    | 19 +++++++++++++++----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/FirefliesBanner.tsx b/frontend/src/components/FirefliesBanner.tsx
index 92b14ca..686ce84 100644
--- a/frontend/src/components/FirefliesBanner.tsx
+++ b/frontend/src/components/FirefliesBanner.tsx
@@ -139,8 +139,20 @@ const FirefliesBanner: React.FC<FirefliesBannerProps> = ({ username, palette, se
 
             ctx.clearRect(0, 0, width, height);
             
-            // Subtle forest night background
-            ctx.fillStyle = '#020408';
+            // Subtle theme-aware night sky background
+            const isLight = theme.palette.mode === 'light';
+            const bgGrad = ctx.createRadialGradient(width/2, height/2, 0, width/2, height/2, width);
+            
+            if (isLight) {
+                // Use a darker shade of the primary color but not pitch black
+                bgGrad.addColorStop(0, alpha(brightColors[0], 0.3));
+                bgGrad.addColorStop(1, alpha(brightColors[0], 0.8));
+            } else {
+                bgGrad.addColorStop(0, '#0a0e14');
+                bgGrad.addColorStop(1, '#020408');
+            }
+            
+            ctx.fillStyle = bgGrad;
             ctx.fillRect(0, 0, width, height);
 
             time += flickerSpeed;
diff --git a/frontend/src/components/NebulaBanner.tsx b/frontend/src/components/NebulaBanner.tsx
index caab744..6ed440b 100644
--- a/frontend/src/components/NebulaBanner.tsx
+++ b/frontend/src/components/NebulaBanner.tsx
@@ -170,11 +170,22 @@ const NebulaBanner: React.FC<NebulaBannerProps> = ({ username, palette, ratingsC
 
             ctx.clearRect(0, 0, width, height);
             
-            // 1. Deep Space Night Sky Gradient
+            // 1. Dynamic Celestial Background
+            const isLight = theme.palette.mode === 'light';
             const skyGrad = ctx.createRadialGradient(width/2, height/2, 0, width/2, height/2, width);
-            skyGrad.addColorStop(0, '#0a0a1a'); // Dark Midnight Blue
-            skyGrad.addColorStop(0.5, '#05050d'); // Near Black
-            skyGrad.addColorStop(1, '#020205'); // Deep Space
+            
+            if (isLight) {
+                // Soft Midnight/Deep Primary for light mode
+                skyGrad.addColorStop(0, alpha(colors[0], 0.4)); 
+                skyGrad.addColorStop(0.6, alpha(colors[0], 0.7));
+                skyGrad.addColorStop(1, alpha(colors[0], 0.9));
+            } else {
+                // True Deep Space for dark mode
+                skyGrad.addColorStop(0, '#0a0a1a'); 
+                skyGrad.addColorStop(0.5, '#05050d'); 
+                skyGrad.addColorStop(1, '#020205'); 
+            }
+            
             ctx.fillStyle = skyGrad;
             ctx.fillRect(0, 0, width, height);