- - New ThemeConfigContext provider that fetches theme on app load and applies it to the DOM (title, meta description, favicon, CSS variables,

theme-color)/- - Admin Theme settings page under Settings > Theme tab/- All logo references (5 components) now pull from the theme config with fallback to default

src/context/ThemeConfigContext.js

@@ -0,0 +1,161 @@
+import React, { createContext, useState, useContext, useEffect, useCallback } from 'react';
+import axios from 'axios';
+
+const ThemeConfigContext = createContext();
+
+const API_URL = process.env.REACT_APP_BACKEND_URL || window.location.origin;
+
+const DEFAULT_THEME = {
+  site_name: 'LOAF - Lesbians Over Age Fifty',
+  site_short_name: 'LOAF',
+  site_description: 'A community organization for lesbians over age fifty in Houston and surrounding areas.',
+  logo_url: null,
+  favicon_url: null,
+  colors: {
+    primary: '280 47% 27%',
+    primary_foreground: '0 0% 100%',
+    accent: '24 86% 55%',
+    brand_purple: '256 35% 47%',
+    brand_orange: '24 86% 55%',
+    brand_lavender: '262 46% 80%'
+  },
+  meta_theme_color: '#664fa3'
+};
+
+export const ThemeConfigProvider = ({ children }) => {
+  const [themeConfig, setThemeConfig] = useState(DEFAULT_THEME);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const applyThemeToDOM = useCallback((config) => {
+    // Apply CSS variables for colors
+    if (config.colors) {
+      const root = document.documentElement;
+      Object.entries(config.colors).forEach(([key, value]) => {
+        // Convert snake_case to kebab-case for CSS variable names
+        const cssVarName = `--${key.replace(/_/g, '-')}`;
+        root.style.setProperty(cssVarName, value);
+      });
+    }
+
+    // Update favicon
+    if (config.favicon_url) {
+      let link = document.querySelector("link[rel*='icon']");
+      if (!link) {
+        link = document.createElement('link');
+        link.rel = 'icon';
+        document.head.appendChild(link);
+      }
+      link.href = config.favicon_url;
+    }
+
+    // Update document title
+    if (config.site_name) {
+      document.title = config.site_name;
+      // Also store for use by pages that want to append their own title
+      window.__SITE_NAME__ = config.site_name;
+    }
+
+    // Update meta description
+    if (config.site_description) {
+      let metaDesc = document.querySelector("meta[name='description']");
+      if (!metaDesc) {
+        metaDesc = document.createElement('meta');
+        metaDesc.name = 'description';
+        document.head.appendChild(metaDesc);
+      }
+      metaDesc.content = config.site_description;
+    }
+
+    // Update meta theme-color for PWA
+    if (config.meta_theme_color) {
+      let meta = document.querySelector("meta[name='theme-color']");
+      if (!meta) {
+        meta = document.createElement('meta');
+        meta.name = 'theme-color';
+        document.head.appendChild(meta);
+      }
+      meta.content = config.meta_theme_color;
+    }
+  }, []);
+
+  const fetchThemeConfig = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await axios.get(`${API_URL}/api/config/theme`);
+      const config = { ...DEFAULT_THEME, ...response.data };
+
+      // Merge colors if provided
+      if (response.data.colors) {
+        config.colors = { ...DEFAULT_THEME.colors, ...response.data.colors };
+      }
+
+      setThemeConfig(config);
+      applyThemeToDOM(config);
+    } catch (err) {
+      console.warn('Failed to fetch theme config, using defaults:', err.message);
+      setError(err.message);
+      // Apply default theme to DOM
+      applyThemeToDOM(DEFAULT_THEME);
+    } finally {
+      setLoading(false);
+    }
+  }, [applyThemeToDOM]);
+
+  // Fetch theme config on mount
+  useEffect(() => {
+    fetchThemeConfig();
+  }, [fetchThemeConfig]);
+
+  // Helper function to get logo URL with fallback
+  const getLogoUrl = useCallback(() => {
+    return themeConfig.logo_url || `${process.env.PUBLIC_URL}/loaf-logo.png`;
+  }, [themeConfig.logo_url]);
+
+  // Helper function to get favicon URL with fallback
+  const getFaviconUrl = useCallback(() => {
+    return themeConfig.favicon_url || `${process.env.PUBLIC_URL}/favicon.ico`;
+  }, [themeConfig.favicon_url]);
+
+  const value = {
+    // Theme configuration
+    themeConfig,
+    loading,
+    error,
+
+    // Convenience accessors
+    siteName: themeConfig.site_name,
+    siteShortName: themeConfig.site_short_name,
+    siteDescription: themeConfig.site_description,
+    colors: themeConfig.colors,
+    metaThemeColor: themeConfig.meta_theme_color,
+
+    // Helper functions
+    getLogoUrl,
+    getFaviconUrl,
+
+    // Actions
+    refreshTheme: fetchThemeConfig,
+
+    // Default theme for reference
+    DEFAULT_THEME
+  };
+
+  return (
+    <ThemeConfigContext.Provider value={value}>
+      {children}
+    </ThemeConfigContext.Provider>
+  );
+};
+
+export const useThemeConfig = () => {
+  const context = useContext(ThemeConfigContext);
+  if (context === undefined) {
+    throw new Error('useThemeConfig must be used within a ThemeConfigProvider');
+  }
+  return context;
+};
+
+export default ThemeConfigContext;