Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/public_html/src/context/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';

export type ThemeColors = {
  primary: string;
  'primary-dark': string;
  'primary-light': string;
  secondary: string;
  'secondary-dark': string;
  'secondary-light': string;
  background: string;
  'background-dark': string;
  'background-light': string;
  text: string;
  'text-dark': string;
  'text-light': string;
  accent: string;
  'accent-dark': string;
  'accent-light': string;
  border: string;
  gradientStart: string;
  gradientEnd: string;
};

const defaultTheme: ThemeColors = {
  primary: '#9f1fad',
  'primary-dark': '#a1127f',
  'primary-light': '#d785e0',
  secondary: '#e0d252',
  'secondary-dark': '#bde830',
  'secondary-light': '#ebe4ad',
  background: '#F8FAFC',
  'background-dark': '#EDF2F7',
  'background-light': '#FFFFFF',
  text: '#222222',
  'text-dark': '#000000',
  'text-light': '#4A5568',
  accent: '#26d9c7',
  'accent-dark': '#17a4cf',
  'accent-light': '#99e6de',
  border: '#E2E8F0',
  gradientStart: '#9f1fad',
  gradientEnd: '#a1127f',
};

const ThemeContext = createContext<{
  theme: ThemeColors;
  setTheme: (colors: Partial<ThemeColors>) => void;
  resetTheme: () => void;
}>({
  theme: defaultTheme,
  setTheme: () => {},
  resetTheme: () => {},
});

export const ThemeProvider = ({ children }: { children: ReactNode }) => {
  const [theme, setThemeState] = useState<ThemeColors>(defaultTheme);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    // Load from localStorage if available
    if (typeof window !== 'undefined') {
      const stored = localStorage.getItem('customTheme');
      if (stored) {
        setThemeState({ ...defaultTheme, ...JSON.parse(stored) });
      }
    }
  }, []);

  useEffect(() => {
    if (mounted && typeof document !== 'undefined') {
      // Apply CSS variables
      const root = document.documentElement;
      Object.entries(theme).forEach(([key, value]) => {
        root.style.setProperty(`--color-${key}`, value);
      });
    }
  }, [theme, mounted]);

  const setTheme = (colors: Partial<ThemeColors>) => {
    setThemeState((prev) => {
      const updated = { ...prev, ...colors };
      if (typeof window !== 'undefined') {
        localStorage.setItem('customTheme', JSON.stringify(updated));
      }
      return updated;
    });
  };

  const resetTheme = () => {
    setThemeState(defaultTheme);
    if (typeof window !== 'undefined') {
      localStorage.removeItem('customTheme');
    }
  };

  return (
    <ThemeContext.Provider value={{ theme, setTheme, resetTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);