etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Aurora animation ignoring light theme background color

Browse Source 
Aurora WebGL всегда использовала darkBackground для color stops,
при переключении на светлую тему фон анимации оставался тёмным.

Добавлен useTheme() для реактивного определения текущей темы,
background выбирается между darkBackground и lightBackground.
This commit is contained in:
c0mrade
2026-02-04 12:14:44 +03:00
parent dc756455f9
commit c1dc019c8b
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/layout/AppShell/Aurora.tsx
View File

@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useQuery, useQueryClient } from '@tanstack/react-query';
import { Renderer, Program, Mesh, Color, Triangle } from 'ogl'; import { Renderer, Program, Mesh, Color, Triangle } from 'ogl';
import { brandingApi } from '@/api/branding'; import { brandingApi } from '@/api/branding';
import { useTheme } from '@/hooks/useTheme';
import { ThemeSettings, DEFAULT_THEME_COLORS } from '@/types/theme'; import { ThemeSettings, DEFAULT_THEME_COLORS } from '@/types/theme';
const VERT = /* glsl */ `#version 300 es const VERT = /* glsl */ `#version 300 es
@@ -148,6 +149,10 @@ export function Aurora() {
const themeColors = const themeColors =
queryClient.getQueryData<ThemeSettings>(['theme-colors']) || DEFAULT_THEME_COLORS; queryClient.getQueryData<ThemeSettings>(['theme-colors']) || DEFAULT_THEME_COLORS;
// Pick background based on current theme
const { isDark } = useTheme();
const background = isDark ? themeColors.darkBackground : themeColors.lightBackground;
useEffect(() => { useEffect(() => {
if (!isEnabled || !containerRef.current) return; if (!isEnabled || !containerRef.current) return;
@@ -168,7 +173,7 @@ export function Aurora() {
const geometry = new Triangle(gl); const geometry = new Triangle(gl);
const colorStops = generateColorStops(themeColors.accent, themeColors.darkBackground); const colorStops = generateColorStops(themeColors.accent, background);
const colorStopsArray = colorStops const colorStopsArray = colorStops
.map((hex) => { .map((hex) => {
const c = new Color(hex); const c = new Color(hex);
@@ -231,7 +236,7 @@ export function Aurora() {
rendererRef.current = null; rendererRef.current = null;
programRef.current = null; programRef.current = null;
}; };
}, [isEnabled, themeColors.accent, themeColors.darkBackground]); }, [isEnabled, themeColors.accent, background]);
if (!isEnabled) { if (!isEnabled) {
return null; return null;