76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
/**
|
|
* Hook pour la gestion du thème et des préférences utilisateur
|
|
* Centralise la logique de personnalisation
|
|
*/
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
|
|
export interface IThemePreferences {
|
|
reducedMotion: boolean;
|
|
highContrast: boolean;
|
|
fontSize: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
export interface IUseThemeReturn {
|
|
preferences: IThemePreferences;
|
|
updatePreference: <K extends keyof IThemePreferences>(
|
|
key: K,
|
|
value: IThemePreferences[K]
|
|
) => void;
|
|
resetPreferences: () => void;
|
|
}
|
|
|
|
const DEFAULT_PREFERENCES: IThemePreferences = {
|
|
reducedMotion: false,
|
|
highContrast: false,
|
|
fontSize: 'md',
|
|
};
|
|
|
|
export const useTheme = (): IUseThemeReturn => {
|
|
const [preferences, setPreferences] = useState<IThemePreferences>(DEFAULT_PREFERENCES);
|
|
|
|
// Charger les préférences depuis localStorage au montage
|
|
useEffect(() => {
|
|
try {
|
|
const saved = localStorage.getItem('banquise-theme-preferences');
|
|
if (saved) {
|
|
setPreferences({ ...DEFAULT_PREFERENCES, ...JSON.parse(saved) });
|
|
}
|
|
} catch (error) {
|
|
console.warn('Erreur lors du chargement des préférences:', error);
|
|
}
|
|
|
|
// Détecter les préférences système
|
|
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
if (mediaQuery.matches) {
|
|
setPreferences(prev => ({ ...prev, reducedMotion: true }));
|
|
}
|
|
}, []);
|
|
|
|
// Sauvegarder les préférences dans localStorage
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.setItem('banquise-theme-preferences', JSON.stringify(preferences));
|
|
} catch (error) {
|
|
console.warn('Erreur lors de la sauvegarde des préférences:', error);
|
|
}
|
|
}, [preferences]);
|
|
|
|
const updatePreference = useCallback(<K extends keyof IThemePreferences>(
|
|
key: K,
|
|
value: IThemePreferences[K]
|
|
) => {
|
|
setPreferences(prev => ({ ...prev, [key]: value }));
|
|
}, []);
|
|
|
|
const resetPreferences = useCallback(() => {
|
|
setPreferences(DEFAULT_PREFERENCES);
|
|
}, []);
|
|
|
|
return {
|
|
preferences,
|
|
updatePreference,
|
|
resetPreferences,
|
|
};
|
|
};
|