main

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { ThemeConfig, defaultTheme } from '@/types/theme';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+interface DynamicThemeContextType {
+    theme: ThemeConfig;
+    setTheme: (theme: ThemeConfig) => void;
+}
+
+const DynamicThemeContext = createContext<DynamicThemeContextType>({
+    theme: defaultTheme,
+    setTheme: () => { },
+});
+
+export const useDynamicTheme = () => useContext(DynamicThemeContext);
+
+interface DynamicThemeProviderProps {
+    children: React.ReactNode;
+    initialTheme?: ThemeConfig;
+}
+
+export function DynamicThemeProvider({ children, initialTheme }: DynamicThemeProviderProps) {
+    const [theme, setTheme] = useState<ThemeConfig>(initialTheme || defaultTheme);
+
+    // 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);
+        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);
+        }
+
+        if (theme.backgroundImage) {
+            root.style.setProperty('--app-background-image', `url(${theme.backgroundImage})`);
+        } else {
+            root.style.removeProperty('--app-background-image');
+        }
+
+    }, [theme]);
+
+    return (
+        <DynamicThemeContext.Provider value={{ theme, setTheme }}>
+            {children}
+        </DynamicThemeContext.Provider>
+    );
+}