From dfe8ccb14091a6cdce3cd7392b67948083847a2b Mon Sep 17 00:00:00 2001 From: Nils Pukropp Date: Wed, 18 Feb 2026 15:28:54 +0100 Subject: [PATCH] edited background for nebula and fireflies --- frontend/src/components/FirefliesBanner.tsx | 9 +++++---- frontend/src/components/NebulaBanner.tsx | 16 ++++++++-------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/FirefliesBanner.tsx b/frontend/src/components/FirefliesBanner.tsx index 77de2de..21c49e5 100644 --- a/frontend/src/components/FirefliesBanner.tsx +++ b/frontend/src/components/FirefliesBanner.tsx @@ -137,14 +137,15 @@ const FirefliesBanner: React.FC = ({ username, palette, se ctx.clearRect(0, 0, width, height); + // Vibrant 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) { - bgGrad.addColorStop(0, alpha(brightColors[0], 0.3)); - bgGrad.addColorStop(1, alpha(brightColors[0], 0.8)); + bgGrad.addColorStop(0, alpha(brightColors[0], 0.5)); + bgGrad.addColorStop(1, alpha(brightColors[0], 0.95)); } else { - bgGrad.addColorStop(0, '#0a0e14'); - bgGrad.addColorStop(1, '#020408'); + bgGrad.addColorStop(0, '#141a2a'); // Noticeable blue-grey tint + bgGrad.addColorStop(1, '#05080f'); } ctx.fillStyle = bgGrad; ctx.fillRect(0, 0, width, height); diff --git a/frontend/src/components/NebulaBanner.tsx b/frontend/src/components/NebulaBanner.tsx index 6ed440b..a253013 100644 --- a/frontend/src/components/NebulaBanner.tsx +++ b/frontend/src/components/NebulaBanner.tsx @@ -175,15 +175,15 @@ const NebulaBanner: React.FC = ({ username, palette, ratingsC const skyGrad = ctx.createRadialGradient(width/2, height/2, 0, width/2, height/2, width); 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)); + // Vibrant Deep Primary for light mode + skyGrad.addColorStop(0, alpha(colors[0], 0.6)); + skyGrad.addColorStop(0.5, alpha(colors[0], 0.8)); + skyGrad.addColorStop(1, alpha(colors[0], 1.0)); } else { - // True Deep Space for dark mode - skyGrad.addColorStop(0, '#0a0a1a'); - skyGrad.addColorStop(0.5, '#05050d'); - skyGrad.addColorStop(1, '#020205'); + // True Deep Space with visible tints for dark mode + skyGrad.addColorStop(0, '#1a1a3a'); // More blue/purple tint + skyGrad.addColorStop(0.5, '#0a0a1a'); + skyGrad.addColorStop(1, '#050508'); } ctx.fillStyle = skyGrad;