ThemeContext.tsx

Go to the documentation of this file.

"use client";
 
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import { Theme, getTheme, defaultTheme } from '@/lib/themes';
 
// Helper to convert hex to RGB
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
 
interface ThemeContextType {
  theme: Theme;
  themeId: string;
  setTheme: (themeId: string) => void;
  isLoading: boolean;
}
 
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
const THEME_STORAGE_KEY = 'everydaypos_theme';
 
export function ThemeProvider({ children }: { children: ReactNode }) {
  const [themeId, setThemeId] = useState<string>(defaultTheme);
  const [isLoading, setIsLoading] = useState(true);
 
  // Load theme from localStorage on mount
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
      if (savedTheme) {
        setThemeId(savedTheme);
      }
      setIsLoading(false);
    }
  }, []);
 
  // Apply theme CSS variables whenever theme changes
  useEffect(() => {
    if (typeof window === 'undefined') return;
 
    const theme = getTheme(themeId);
    const root = document.documentElement;
 
    // Apply color variables
    root.style.setProperty('--bg', theme.colors.bg);
    root.style.setProperty('--surface', theme.colors.surface);
    root.style.setProperty('--surface-2', theme.colors.surface2);
    root.style.setProperty('--text', theme.colors.text);
    root.style.setProperty('--muted', theme.colors.muted);
    root.style.setProperty('--border', theme.colors.border);
    root.style.setProperty('--brand', theme.colors.brand);
    root.style.setProperty('--brand-2', theme.colors.brand2);
    root.style.setProperty('--warn', theme.colors.warn);
    root.style.setProperty('--danger', theme.colors.danger);
    
    // Computed hover states for better interactivity
    root.style.setProperty('--border-hover', theme.colors.brand);
    root.style.setProperty('--surface-hover', theme.colors.surface2);
 
    // Apply optional colors
    if (theme.colors.success) {
      root.style.setProperty('--success', theme.colors.success);
    }
    if (theme.colors.info) {
      root.style.setProperty('--info', theme.colors.info);
    }
    
    // Apply accent colors for visual effects
    const accent = theme.colors.brand2 || theme.colors.brand;
    root.style.setProperty('--accent', accent);
    
    // Create accent variations
    const brandRgb = hexToRgb(theme.colors.brand);
    if (brandRgb) {
      root.style.setProperty('--accent-light', `rgba(${brandRgb.r}, ${brandRgb.g}, ${brandRgb.b}, 0.1)`);
      root.style.setProperty('--accent-glow', `rgba(${brandRgb.r}, ${brandRgb.g}, ${brandRgb.b}, 0.3)`);
    }
 
    // Apply shadows
    root.style.setProperty('--shadow', theme.shadows.shadow);
    root.style.setProperty('--shadow-sm', theme.shadows.shadowSm);
 
    // Apply radius
    root.style.setProperty('--radius', theme.radius.radius);
    root.style.setProperty('--radius-sm', theme.radius.radiusSm);
 
    // Apply focus
    root.style.setProperty('--focus', theme.focus);
 
    // Add theme class to body for conditional styling
    document.body.className = document.body.className.replace(/theme-\w+/g, '');
    document.body.classList.add(`theme-${themeId}`);
  }, [themeId]);
 
  const handleSetTheme = (newThemeId: string) => {
    setThemeId(newThemeId);
    if (typeof window !== 'undefined') {
      localStorage.setItem(THEME_STORAGE_KEY, newThemeId);
    }
  };
 
  const theme = getTheme(themeId);
 
  return (
    <ThemeContext.Provider value={{ theme, themeId, setTheme: handleSetTheme, isLoading }}>
      {children}
    </ThemeContext.Provider>
  );
}
 
export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}