From a91e0555979540f50ca1afef5ee8c91b162c4a7f Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 4 Feb 2026 12:39:44 +0300
Subject: [PATCH] fix: use theme surface and background colors for Aurora
 animation

Instead of generating color stops from accent at fixed intensities,
use the actual background, surface and accent colors from theme settings.
This ensures Aurora properly adapts to both dark and light themes.
---
 src/components/layout/AppShell/Aurora.tsx | 28 +++++------------------
 1 file changed, 6 insertions(+), 22 deletions(-)

diff --git a/src/components/layout/AppShell/Aurora.tsx b/src/components/layout/AppShell/Aurora.tsx
index f4c9a7d..2cf9fec 100644
--- a/src/components/layout/AppShell/Aurora.tsx
+++ b/src/components/layout/AppShell/Aurora.tsx
@@ -107,25 +107,8 @@ function hexToRgb(hex: string): [number, number, number] {
   return [r, g, b];
 }
 
-function generateColorStops(accent: string, background: string): string[] {
-  const [ar, ag, ab] = hexToRgb(accent);
-
-  // Color 1: Dark background
-  const color1 = background;
-
-  // Color 2: Accent at 40% intensity
-  const midR = Math.round(ar * 255 * 0.4);
-  const midG = Math.round(ag * 255 * 0.4);
-  const midB = Math.round(ab * 255 * 0.4);
-  const color2 = `#${midR.toString(16).padStart(2, '0')}${midG.toString(16).padStart(2, '0')}${midB.toString(16).padStart(2, '0')}`;
-
-  // Color 3: Accent at 70% intensity
-  const brightR = Math.round(ar * 255 * 0.7);
-  const brightG = Math.round(ag * 255 * 0.7);
-  const brightB = Math.round(ab * 255 * 0.7);
-  const color3 = `#${brightR.toString(16).padStart(2, '0')}${brightG.toString(16).padStart(2, '0')}${brightB.toString(16).padStart(2, '0')}`;
-
-  return [color1, color2, color3];
+function generateColorStops(background: string, surface: string, accent: string): string[] {
+  return [background, surface, accent];
 }
 
 export function Aurora() {
@@ -149,9 +132,10 @@ export function Aurora() {
   const themeColors =
     queryClient.getQueryData<ThemeSettings>(['theme-colors']) || DEFAULT_THEME_COLORS;
 
-  // Pick background based on current theme
+  // Pick background and surface based on current theme
   const { isDark } = useTheme();
   const background = isDark ? themeColors.darkBackground : themeColors.lightBackground;
+  const surface = isDark ? themeColors.darkSurface : themeColors.lightSurface;
 
   useEffect(() => {
     if (!isEnabled || !containerRef.current) return;
@@ -173,7 +157,7 @@ export function Aurora() {
 
     const geometry = new Triangle(gl);
 
-    const colorStops = generateColorStops(themeColors.accent, background);
+    const colorStops = generateColorStops(background, surface, themeColors.accent);
     const colorStopsArray = colorStops
       .map((hex) => {
         const c = new Color(hex);
@@ -236,7 +220,7 @@ export function Aurora() {
       rendererRef.current = null;
       programRef.current = null;
     };
-  }, [isEnabled, themeColors.accent, background]);
+  }, [isEnabled, themeColors.accent, background, surface]);
 
   if (!isEnabled) {
     return null;