75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
|
|
import React, { createContext, useContext, useEffect, useState } from 'react';
|
|
|
|
type Theme = 'default' | 'dubai' | 'minimal' | 'nature';
|
|
|
|
interface ThemeContextType {
|
|
theme: Theme;
|
|
setTheme: (theme: Theme) => void;
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
|
|
|
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const [theme, setTheme] = useState<Theme>(() => {
|
|
if (typeof window !== 'undefined') {
|
|
const savedTheme = localStorage.getItem('app-theme');
|
|
return (savedTheme as Theme) || 'default';
|
|
}
|
|
return 'default';
|
|
});
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('app-theme', theme);
|
|
const root = window.document.documentElement;
|
|
|
|
// Remove old theme classes
|
|
root.classList.remove('theme-default', 'theme-dubai', 'theme-minimal', 'theme-nature');
|
|
|
|
// Add new theme class
|
|
root.classList.add(`theme-${theme}`);
|
|
|
|
// Check if we need to force dark mode for specific themes
|
|
if (theme === 'dubai') {
|
|
root.classList.add('dark');
|
|
} else {
|
|
root.classList.remove('dark');
|
|
}
|
|
|
|
}, [theme]);
|
|
|
|
// Background Image Map
|
|
const getBackgroundImage = () => {
|
|
switch (theme) {
|
|
case 'dubai': return "url('https://images.unsplash.com/photo-1512453979798-5ea9ba6a80f4?q=80&w=2000&auto=format&fit=crop')";
|
|
case 'minimal': return "url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2000&auto=format&fit=crop')";
|
|
case 'nature': return "url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=2000&auto=format&fit=crop')";
|
|
default: return 'none'; // Gradient handles default
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, setTheme }}>
|
|
{/* Background Layer managed here for global coverage */}
|
|
{theme !== 'default' && (
|
|
<div
|
|
className="fixed inset-0 z-[-1] transition-all duration-700 ease-in-out bg-cover bg-center bg-no-repeat bg-fixed"
|
|
style={{ backgroundImage: getBackgroundImage() }}
|
|
/>
|
|
)}
|
|
{/* Overlay for contrast if needed */}
|
|
{theme === 'dubai' && <div className="fixed inset-0 z-[-1] bg-black/40 pointer-events-none" />}
|
|
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useTheme = () => {
|
|
const context = useContext(ThemeContext);
|
|
if (context === undefined) {
|
|
throw new Error('useTheme must be used within a ThemeProvider');
|
|
}
|
|
return context;
|
|
};
|