main

src/components/ui/dynamic-theme-provider.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeConfig, defaultTheme } from '@/types/theme';
 import { createContext, useContext, useEffect, useState } from 'react';
+import { themeApi } from '@/lib/api/theme';
 
 interface DynamicThemeContextType {
     theme: ThemeConfig;
@@ -23,25 +24,43 @@ interface DynamicThemeProviderProps {
 export function DynamicThemeProvider({ children, initialTheme }: DynamicThemeProviderProps) {
     const [theme, setTheme] = useState<ThemeConfig>(initialTheme || defaultTheme);
 
+    // Fetch theme on mount
+    useEffect(() => {
+        const fetchTheme = async () => {
+            try {
+                const response = await themeApi.getTheme();
+                // @ts-ignore - The API response wrapper might be generic, assuming response.data is the payload if wrapped, or response if not.
+                // Based on standard axios + nestjs wrapper: response.data.data or response is the data.
+                // Let's assume our client unwraps it or we check.
+                // If createApiClient returns axios instance, .get returns AxiosResponse.
+                // api-service.ts unwraps response.data.
+                // BUT theme.ts calls client.get directly.
+                // Let's fix theme.ts to use apiRequest or handle .data
+
+                // Correction: theme.ts uses client.get. client is axios instance.
+                // So response is AxiosResponse. response.data is the body ({ success, data: theme }).
+                if (response.data && response.data.success && response.data.data) {
+                    setTheme(response.data.data);
+                }
+            } catch (error) {
+                console.error('Failed to fetch theme:', error);
+            }
+        };
+        fetchTheme();
+    }, []);
+
     // Apply theme to CSS variables
     useEffect(() => {
         if (!theme) return;
 
         const root = document.documentElement;
 
-        // We update the CSS variables that map to our Chakra tokens
-        // Note: You might need to adjust the exact variable names based on your final theme.ts generation
-        // Chakra v3 usually uses var(--chakra-colors-primary-500) etc.
-
-        // For this simple implementation, we will assume we can override specific brand colors
-        // In a real generic system, we might need a more complex palette generator to generate 50-950 scales
-
         root.style.setProperty('--chakra-colors-primary-500', theme.primaryColor);
+        // ... rest of logic
         root.style.setProperty('--chakra-colors-primary-600', theme.secondaryColor);
 
         // Backgrounds for the app
         if (theme.backgroundColor) {
-            // We can create a custom variable for app-bg
             root.style.setProperty('--app-background', theme.backgroundColor);
         }