@redacto.io/consent-sdk-react 6.0.0 → 7.1.0

package/src/RedactoPrivacyCenter/components/PrivacyCenterLayout.tsx

@@ -1,8 +1,6 @@
 import { Suspense, useState, useEffect, useCallback } from 'react';
 import SideBarPC from './SideMenuBarPC/SideBarPC';
 import Footer from '../ui/Footer';
-import ThemeToggle from '../ui/ThemeToggle';
-import ThemeTransitionOverlay from './ThemeTransitionOverlay';
 import { PCSelect } from '../ui';
 import { useTranslation } from 'react-i18next';
 import { PAGE_CHROME_BY_PAGE, languageOptions } from '../lib/constants';
@@ -42,7 +40,6 @@ export default function PrivacyCenterLayout({
   return (
     <LocaleContext.Provider value={{ locale, setLocale }}>
       <Suspense fallback={<div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyCenter, minHeight: '100vh' }}>{t('loadingEllipsis')}</div>}>
-        <ThemeTransitionOverlay />
         <main
           className="pc-root"
           style={{
@@ -188,7 +185,6 @@ export default function PrivacyCenterLayout({
                   onChange={handleLanguageChange}
                 />
                 <NotificationBell />
-                <ThemeToggle className="pc-navbar-icon-btn" />
               </div>
             </nav>
             <div style={{

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/SideBarPC.tsx

@@ -18,6 +18,7 @@ const getVar = (varName: string): string => `var(${varName})`;
 import { SideMenuPC } from './SideMenuPC';
 import { useMenuItemsPC } from '../../lib/constants';
 import { useOrganization } from '../../context/OrganizationContext';
+import { useBranding } from '../../context/BrandingContext';
 import type { SideBarPCProps } from './types';
 import { signOutPrivacyCenter } from '../../lib/utils';
 
@@ -34,6 +35,7 @@ export default function SideBarPC({
   const [email, setEmail] = useState<string>('');
   // const [isSigningOut, setIsSigningOut] = useState(false);
   const { organization } = useOrganization();
+  const branding = useBranding();
 
   useEffect(() => {
     setEmail(sessionStorage.getItem('email') || '');
@@ -109,6 +111,8 @@ export default function SideBarPC({
   }, [isMobileOpen]);
 
   const organizationName = organization?.name || '';
+  const displayName = branding?.brand_name || organizationName;
+  const isExpanded = isMobileOpen || !isCollapsed;
 
   const sidebarClassName = useMemo(
     () =>
@@ -325,7 +329,17 @@ export default function SideBarPC({
               transition: 'transform 0.3s ease',
               willChange: 'transform',
             }}>
-              <PCAvatar name={organizationName} color="info" size="md" />
+              {isExpanded && branding?.logo_url ? (
+                <img
+                  src={branding.logo_url}
+                  alt={displayName}
+                  style={{ height: '32px', width: 'auto', maxWidth: '160px', objectFit: 'contain', display: 'block' }}
+                />
+              ) : branding?.icon_url ? (
+                <PCAvatar src={branding.icon_url} name={displayName} color="info" size="md" />
+              ) : (
+                <PCAvatar name={displayName} color="info" size="md" />
+              )}
             </div>
             <div style={headerTextStyle}>
               <PCText style={{
@@ -337,7 +351,7 @@ export default function SideBarPC({
                 transition: 'opacity 0.3s ease, transform 0.3s ease',
                 willChange: 'opacity, transform',
               }}>
-                {organizationName}
+                {displayName}
               </PCText>
             </div>
           </div>

package/src/RedactoPrivacyCenter/context/BrandingContext.tsx

@@ -0,0 +1,44 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { fetchOrgBranding } from '../api/orgBranding';
+import { applyBrandingTheme, clearBrandingTheme } from '../styles/applyBrandingTheme';
+import type { OrgBrandingDetail } from '../lib/types';
+
+type BrandingContextValue = { branding: OrgBrandingDetail | null };
+
+const BrandingContext = createContext<BrandingContextValue | null>(null);
+
+export const BrandingProvider = ({ children, slug }: { children: ReactNode; slug: string }) => {
+  const [branding, setBranding] = useState<OrgBrandingDetail | null>(null);
+
+  useEffect(() => {
+    if (!slug) return;
+    let cancelled = false;
+    fetchOrgBranding(slug)
+      .then((data) => {
+        if (!cancelled) setBranding(data);
+      })
+      .catch((error) => {
+        console.warn('[RedactoPrivacyCenter] org branding fetch failed:', error);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+
+  useEffect(() => {
+    if (!branding) return;
+    applyBrandingTheme(branding.theme);
+    return clearBrandingTheme;
+  }, [branding]);
+
+  return (
+    <BrandingContext.Provider value={{ branding }}>
+      {children}
+    </BrandingContext.Provider>
+  );
+};
+
+export const useBranding = (): OrgBrandingDetail | null => {
+  const ctx = useContext(BrandingContext);
+  return ctx?.branding ?? null;
+};

package/src/RedactoPrivacyCenter/lib/types.ts

@@ -27,6 +27,28 @@ export type OrganizationResponse = {
   detail: OrganizationDetail;
 };
 
+export type OrgBrandingTheme = {
+  primary: string;
+  secondary: string;
+  primary_contrast: string;
+  link: string;
+  surface: string;
+  text: string;
+  text_muted: string;
+  border: string;
+  success: string;
+  warning: string;
+  danger: string;
+};
+
+export type OrgBrandingDetail = {
+  logo_url: string | null;
+  icon_url: string | null;
+  brand_name: string;
+  theme: OrgBrandingTheme;
+  hide_platform_branding: boolean;
+};
+
 export type DataElement = {
   uuid: string;
   name: string;

package/src/RedactoPrivacyCenter/styles/applyBrandingTheme.ts

@@ -0,0 +1,66 @@
+import type { OrgBrandingTheme } from '../lib/types';
+
+const OVERRIDDEN_VARS = [
+  '--pc-primary',
+  '--pc-primary-hover',
+  '--pc-primary-active',
+  '--pc-info',
+  '--pc-border-color-focus',
+  '--pc-secondary',
+  '--pc-secondary-hover',
+  '--pc-text-inverse',
+  '--pc-bg-shell',
+  '--pc-bg-primary',
+  '--pc-text-primary',
+  '--pc-text-secondary',
+  '--pc-border-color',
+  '--pc-success',
+  '--pc-warning',
+  '--pc-error',
+] as const;
+
+function darken(hex: string, amount: number): string {
+  const h = hex.replace('#', '').trim();
+  if (h.length !== 6) return hex;
+  const num = parseInt(h, 16);
+  if (Number.isNaN(num)) return hex;
+  const r = Math.max(0, ((num >> 16) & 0xff) - Math.round(255 * amount));
+  const g = Math.max(0, ((num >> 8) & 0xff) - Math.round(255 * amount));
+  const b = Math.max(0, (num & 0xff) - Math.round(255 * amount));
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+}
+
+export function applyBrandingTheme(theme: OrgBrandingTheme): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  const set = (prop: string, value: string) => root.style.setProperty(prop, value);
+
+  set('--pc-primary', theme.primary);
+  set('--pc-primary-hover', darken(theme.primary, 0.08));
+  set('--pc-primary-active', darken(theme.primary, 0.16));
+  set('--pc-info', theme.primary);
+  set('--pc-border-color-focus', theme.primary);
+
+  set('--pc-secondary', theme.secondary);
+  set('--pc-secondary-hover', darken(theme.secondary, 0.08));
+
+  set('--pc-text-inverse', theme.primary_contrast);
+
+  set('--pc-bg-shell', theme.surface);
+  set('--pc-bg-primary', theme.surface);
+
+  set('--pc-text-primary', theme.text);
+  set('--pc-text-secondary', theme.text_muted);
+
+  set('--pc-border-color', theme.border);
+
+  set('--pc-success', theme.success);
+  set('--pc-warning', theme.warning);
+  set('--pc-error', theme.danger);
+}
+
+export function clearBrandingTheme(): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  for (const prop of OVERRIDDEN_VARS) root.style.removeProperty(prop);
+}

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -32,7 +32,7 @@ export const injectPCStyles = () => {
     // CSS variables will be injected via a separate import or inline
     // For now, we'll rely on the host app or inject them here
     variablesStyle.textContent = `
-      :root, [data-theme="light"] {
+      :root {
         --pc-primary: #3b82f6;
         --pc-primary-hover: #2563eb;
         --pc-primary-active: #1d4ed8;
@@ -107,39 +107,6 @@ export const injectPCStyles = () => {
         --pc-sidebar-expanded-width: 300px;
         --pc-sidebar-expanded-width-2xl: 320px;
       }
-      [data-theme="dark"] {
-        --pc-primary: #60a5fa;
-        --pc-primary-hover: #3b82f6;
-        --pc-primary-active: #2563eb;
-        --pc-secondary: #9ca3af;
-        --pc-secondary-hover: #6b7280;
-        --pc-success: #34d399;
-        --pc-error: #f87171;
-        --pc-warning: #fbbf24;
-        --pc-warning-bg: #78350f;
-        --pc-warning-border: #fbbf24;
-        --pc-warning-text: #fef3c7;
-        --pc-info: #60a5fa;
-        --pc-bg-shell: #111827;
-        --pc-bg-primary: #1b2435;
-        --pc-bg-secondary: #243044;
-        --pc-bg-tertiary: #31405a;
-        --pc-bg-hover: #243044;
-        --pc-bg-active: #31405a;
-        --pc-bg-overlay: rgba(0, 0, 0, 0.7);
-        --pc-text-primary: #f9fafb;
-        --pc-text-secondary: #d1d5db;
-        --pc-text-tertiary: #9ca3af;
-        --pc-text-inverse: #111827;
-        --pc-text-disabled: #6b7280;
-        --pc-border-color: rgba(148, 163, 184, 0.18);
-        --pc-border-color-hover: rgba(148, 163, 184, 0.28);
-        --pc-border-color-focus: #60a5fa;
-        --pc-sidebar-shadow: 14px 0 36px rgba(2, 6, 23, 0.42), 1px 0 0 rgba(148, 163, 184, 0.08);
-        --pc-icon-filter: 1;
-        --pc-consent-toolbar-control-height: 2rem;
-        --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
-      }
     `;
     document.head.appendChild(variablesStyle);
   }
@@ -170,82 +137,6 @@ export const injectPCStyles = () => {
       transition: none !important;
     }
     
-    /* Sun and Moon Rising Animation */
-    @keyframes pc-sun-moon-rise {
-      0% {
-        bottom: -150px;
-        opacity: 0;
-        transform: translateX(-50%) scale(0.5) rotate(-10deg);
-      }
-      15% {
-        opacity: 1;
-        transform: translateX(-50%) scale(1) rotate(0deg);
-      }
-      70% {
-        opacity: 1;
-        transform: translateX(-50%) scale(1.1) rotate(5deg);
-      }
-      100% {
-        bottom: calc(100vh + 50px);
-        opacity: 0;
-        transform: translateX(-50%) scale(0.7) rotate(10deg);
-      }
-    }
-    
-    /* Sun specific glow animation */
-    @keyframes pc-sun-glow {
-      0%, 100% {
-        filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.7)) 
-                drop-shadow(0 0 60px rgba(251, 191, 36, 0.4));
-      }
-      50% {
-        filter: drop-shadow(0 0 50px rgba(251, 191, 36, 0.9)) 
-                drop-shadow(0 0 100px rgba(251, 191, 36, 0.6));
-      }
-    }
-    
-    /* Moon specific glow animation */
-    @keyframes pc-moon-glow {
-      0%, 100% {
-        filter: drop-shadow(0 0 30px rgba(224, 231, 255, 0.7)) 
-                drop-shadow(0 0 60px rgba(224, 231, 255, 0.4));
-      }
-      50% {
-        filter: drop-shadow(0 0 50px rgba(224, 231, 255, 0.9)) 
-                drop-shadow(0 0 100px rgba(224, 231, 255, 0.6));
-      }
-    }
-    
-    .pc-theme-transition-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      z-index: 9999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      will-change: opacity;
-      overflow: hidden;
-    }
-    
-    .pc-theme-transition-icon {
-      will-change: transform, opacity, bottom, filter;
-    }
-    
-    .pc-theme-transition-light {
-      animation: pc-sun-moon-rise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
-                 pc-sun-glow 1s ease-in-out;
-    }
-    
-    .pc-theme-transition-dark {
-      animation: pc-sun-moon-rise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
-                 pc-moon-glow 1s ease-in-out;
-    }
-    
     /* Keyframe Animations */
     @keyframes pc-spin {
       0% {
@@ -365,7 +256,8 @@ export const injectPCStyles = () => {
     }
 
     .pc-button-secondary:hover:not(:disabled) {
-      background-color: var(--pc-secondary-hover) !important;
+      background-color: var(--pc-primary) !important;
+      color: var(--pc-text-inverse) !important;
     }
 
     .pc-button-outline:hover:not(:disabled) {

package/src/RedactoPrivacyCenter/styles/pcStyles.ts

@@ -204,8 +204,9 @@ export const pcStyles = {
     backgroundColor: getVar('--pc-primary-hover'),
   },
   buttonSecondary: {
-    backgroundColor: getVar('--pc-secondary'),
-    color: getVar('--pc-text-inverse'),
+    backgroundColor: 'transparent',
+    color: getVar('--pc-primary'),
+    border: `1px solid ${getVar('--pc-primary')}`,
   },
   buttonOutline: {
     backgroundColor: 'transparent',

package/src/RedactoPrivacyCenter/styles/variables.css

@@ -1,8 +1,7 @@
 /* CSS Custom Properties for Privacy Center SDK */
 /* These variables are scoped and won't conflict with host app styles */
 
-:root,
-[data-theme="light"] {
+:root {
   /* Colors */
   --pc-primary: #3b82f6;
   --pc-primary-hover: #2563eb;
@@ -95,44 +94,3 @@
   /* Header: language, notifications, theme (same pixel row as compact controls) */
   --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
 }
-
-[data-theme="dark"] {
-  /* Colors */
-  --pc-primary: #60a5fa;
-  --pc-primary-hover: #3b82f6;
-  --pc-primary-active: #2563eb;
-  --pc-secondary: #9ca3af;
-  --pc-secondary-hover: #6b7280;
-  --pc-success: #34d399;
-  --pc-error: #f87171;
-  --pc-warning: #fbbf24;
-  --pc-warning-bg: #78350f;
-  --pc-warning-border: #fbbf24;
-  --pc-warning-text: #fef3c7;
-  --pc-info: #60a5fa;
-
-  /* Backgrounds */
-  --pc-bg-shell: #111827;
-  --pc-bg-primary: #1b2435;
-  --pc-bg-secondary: #243044;
-  --pc-bg-tertiary: #31405a;
-  --pc-bg-hover: #243044;
-  --pc-bg-active: #31405a;
-  --pc-bg-overlay: rgba(0, 0, 0, 0.7);
-
-  /* Text */
-  --pc-text-primary: #f9fafb;
-  --pc-text-secondary: #d1d5db;
-  --pc-text-tertiary: #9ca3af;
-  --pc-text-inverse: #111827;
-  --pc-text-disabled: #6b7280;
-
-  /* Borders */
-  --pc-border-color: rgba(148, 163, 184, 0.18);
-  --pc-border-color-hover: rgba(148, 163, 184, 0.28);
-  --pc-border-color-focus: #60a5fa;
-  --pc-sidebar-shadow: 14px 0 36px rgba(2, 6, 23, 0.42), 1px 0 0 rgba(148, 163, 184, 0.08);
-  
-  /* Icon filters for dark theme */
-  --pc-icon-filter: 1;
-}

package/src/RedactoPrivacyCenter/ui/Footer.tsx

@@ -1,13 +1,15 @@
 import { useTranslation } from 'react-i18next';
 import { pcStyles } from '../styles/pcStyles';
 import PoweredByRedacto from '../assets/poweredByRedacto.svg';
-import { useTheme } from '../context/theme';
+import { useBranding } from '../context/BrandingContext';
 
 const getVar = (varName: string): string => `var(${varName})`;
 
 export default function Footer() {
   const { t } = useTranslation();
-  const { theme } = useTheme();
+  const branding = useBranding();
+
+  if (branding?.hide_platform_branding) return null;
 
   return (
     <footer
@@ -46,15 +48,7 @@ export default function Footer() {
             alignItems: 'center',
             justifyContent: 'center',
             minHeight: '1.75rem',
-            padding:
-              theme === 'dark' ? '0.25rem 0.5rem' : 0,
-            backgroundColor:
-              theme === 'dark' ? 'rgba(255, 255, 255, 0.92)' : 'transparent',
             borderRadius: '9999px',
-            boxShadow:
-              theme === 'dark'
-                ? '0 8px 18px rgba(2, 6, 23, 0.28)'
-                : 'none',
           }}
         >
           <img

package/src/RedactoPrivacyCenter/components/ThemeTransitionOverlay.tsx

@@ -1,85 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { IoSunnyOutline, IoMoonOutline } from 'react-icons/io5';
-import { useTheme } from '../context/theme';
-
-export default function ThemeTransitionOverlay() {
-  const { isTransitioning, targetTheme } = useTheme();
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const iconRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isTransitioning && overlayRef.current && iconRef.current) {
-      const overlay = overlayRef.current;
-      const icon = iconRef.current;
-      
-      // Trigger animation
-      overlay.style.display = 'flex';
-      // Force reflow to ensure display change is applied
-      overlay.offsetHeight;
-      overlay.style.opacity = '1';
-      icon.style.animation = 'none';
-      // Force reflow
-      icon.offsetHeight;
-      icon.style.animation = '';
-      
-      const timeout = setTimeout(() => {
-        if (overlay) {
-          overlay.style.opacity = '0';
-          setTimeout(() => {
-            if (overlay) {
-              overlay.style.display = 'none';
-            }
-          }, 300);
-        }
-      }, 1000);
-
-      return () => clearTimeout(timeout);
-    }
-  }, [isTransitioning, targetTheme]);
-
-  if (!targetTheme) return null;
-
-  const Icon = targetTheme === 'light' ? IoSunnyOutline : IoMoonOutline;
-  // Sun: golden yellow, Moon: soft blue/white
-  const iconColor = targetTheme === 'light' ? '#fbbf24' : '#c7d2fe';
-
-  return (
-    <div
-      ref={overlayRef}
-      className="pc-theme-transition-overlay"
-      style={{
-        display: 'none',
-        opacity: 0,
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: 'none',
-        zIndex: 9999,
-        alignItems: 'center',
-        justifyContent: 'center',
-        transition: 'opacity 0.3s ease',
-      }}
-      aria-hidden="true"
-    >
-      <div
-        ref={iconRef}
-        className={`pc-theme-transition-icon pc-theme-transition-${targetTheme}`}
-        style={{
-          position: 'absolute',
-          bottom: '-150px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          fontSize: '120px',
-          color: iconColor,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Icon size={120} />
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/context/theme.tsx

@@ -1,127 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  type ReactNode,
-} from 'react';
-
-export type Theme = 'light' | 'dark';
-
-type ThemeContextType = {
-  theme: Theme;
-  toggleTheme: () => void;
-  setTheme: (theme: Theme) => void;
-  isTransitioning: boolean;
-  targetTheme: Theme | null;
-};
-
-const THEME_STORAGE_KEY = 'privacy-center-theme';
-
-const ThemeContext = createContext<ThemeContextType | null>(null);
-
-function getInitialTheme(defaultTheme?: Theme): Theme {
-  // If defaultTheme is provided, always use it (takes precedence over sessionStorage)
-  // This ensures that when a parent component explicitly sets a theme, it's respected
-  if (defaultTheme !== undefined) {
-    return defaultTheme;
-  }
-
-  // Otherwise, check sessionStorage first
-  if (typeof window !== 'undefined') {
-    const stored = sessionStorage.getItem(THEME_STORAGE_KEY);
-    if (stored === 'light' || stored === 'dark') {
-      return stored;
-    }
-
-    // Fallback to system preference
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-  }
-
-  return 'light';
-}
-
-type ThemeProviderProps = {
-  children: ReactNode;
-  defaultTheme?: Theme;
-};
-
-export const ThemeProvider = ({ children, defaultTheme }: ThemeProviderProps) => {
-  // Initialize with defaultTheme if provided, otherwise use stored/system preference
-  // When defaultTheme is provided, it takes precedence over sessionStorage
-  const [theme, setThemeState] = useState<Theme>(() => getInitialTheme(defaultTheme));
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const [targetTheme, setTargetTheme] = useState<Theme | null>(null);
-  
-  // Ensure defaultTheme is applied on mount if provided
-  // This handles the case where sessionStorage had a different value
-  useEffect(() => {
-    if (defaultTheme !== undefined) {
-      setThemeState(defaultTheme);
-    }
-  }, []); // Only run on mount
-
-  const setTheme = useCallback((newTheme: Theme) => {
-    if (newTheme !== theme) {
-      setIsTransitioning(true);
-      setTargetTheme(newTheme);
-      setThemeState(newTheme);
-      // Reset transition state after animation completes
-      setTimeout(() => {
-        setIsTransitioning(false);
-        setTargetTheme(null);
-      }, 1000);
-    }
-  }, [theme]);
-
-  const toggleTheme = useCallback(() => {
-    setIsTransitioning(true);
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    setTargetTheme(newTheme);
-    setThemeState(newTheme);
-    // Reset transition state after animation completes
-    setTimeout(() => {
-      setIsTransitioning(false);
-      setTargetTheme(null);
-    }, 1000);
-  }, [theme]);
-
-  // Apply theme to document and persist to sessionStorage
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
-    sessionStorage.setItem(THEME_STORAGE_KEY, theme);
-  }, [theme]);
-
-  // Listen for system theme changes
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      // Only auto-switch if user hasn't explicitly set a preference
-      const stored = sessionStorage.getItem(THEME_STORAGE_KEY);
-      if (!stored) {
-        setThemeState(e.matches ? 'dark' : 'light');
-      }
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, []);
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, isTransitioning, targetTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-export const useTheme = (): ThemeContextType => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};