diff --git a/llm-fe/src/App.tsx b/llm-fe/src/App.tsx
index 50a46d8..884c2a5 100644
--- a/llm-fe/src/App.tsx
+++ b/llm-fe/src/App.tsx
@@ -34,7 +34,7 @@ const ProtectedRoutes = () => {
if (!authenticated) return
//if(!needsNewPassword) return
- return
+ return
}
diff --git a/llm-fe/src/llm-fe/components/GlobalThemeWrapper/GlobalThemeWrapper.tsx b/llm-fe/src/llm-fe/components/GlobalThemeWrapper/GlobalThemeWrapper.tsx
index 7264ead..2e8a688 100644
--- a/llm-fe/src/llm-fe/components/GlobalThemeWrapper/GlobalThemeWrapper.tsx
+++ b/llm-fe/src/llm-fe/components/GlobalThemeWrapper/GlobalThemeWrapper.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import { ThemeProvider } from 'styled-components';
import { useMaterialUIController } from '../../ui-kit/context';
import palettes from '../../ui-kit/assets/theme/base/palettes';
@@ -11,21 +11,21 @@ const GlobalThemeWrapper = ({ children }: GlobalThemeWrapperProps): JSX.Element
const [controller] = useMaterialUIController();
const { themeColor, darkMode } = controller;
- // Default to blue if themeColor is not found
- const selectedPalette = palettes[themeColor as keyof typeof palettes] || palettes.blue;
-
- const theme = {
- main: selectedPalette.main,
- focus: selectedPalette.focus,
- darkMode: darkMode,
- // Add other global theme variables here if needed
- colors: {
- background: darkMode ? '#1a2035' : '#f0f2f5',
- text: darkMode ? '#ffffff' : '#344767',
- cardBackground: darkMode ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.8)',
- cardBorder: darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
- }
- };
+ // Stable theme ref — ParticleBackground restarts its canvas whenever theme identity changes.
+ const theme = useMemo(() => {
+ const selectedPalette = palettes[themeColor as keyof typeof palettes] || palettes.blue;
+ return {
+ main: selectedPalette.main,
+ focus: selectedPalette.focus,
+ darkMode: darkMode,
+ colors: {
+ background: darkMode ? '#1a2035' : '#f0f2f5',
+ text: darkMode ? '#ffffff' : '#344767',
+ cardBackground: darkMode ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.8)',
+ cardBorder: darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
+ }
+ };
+ }, [themeColor, darkMode]);
return (