Zed
bf67c58171
Create the Board Score PWA with offline support, Kurzgesagt-style themes, multiple game configs, dynamic players, avatars via DiceBear, and complete statistics.
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { GameConfig } from '../types';
|
|
import { hexToHslString } from '../utils/theme';
|
|
|
|
export function useGameTheme(gameConfig?: GameConfig | null) {
|
|
useEffect(() => {
|
|
if (!gameConfig?.colors?.primary) return;
|
|
|
|
const root = document.documentElement;
|
|
// Save original styles to revert them when unmounting
|
|
const originalPrimary = root.style.getPropertyValue('--primary');
|
|
const originalForeground = root.style.getPropertyValue('--primary-foreground');
|
|
|
|
const hslColor = hexToHslString(gameConfig.colors.primary);
|
|
|
|
// Apply game specific theme
|
|
root.style.setProperty('--primary', hslColor);
|
|
root.style.setProperty('--primary-foreground', '0 0% 100%'); // White text for primary buttons
|
|
|
|
return () => {
|
|
// Revert to global theme
|
|
if (originalPrimary) root.style.setProperty('--primary', originalPrimary);
|
|
else root.style.removeProperty('--primary');
|
|
|
|
if (originalForeground) root.style.setProperty('--primary-foreground', originalForeground);
|
|
else root.style.removeProperty('--primary-foreground');
|
|
};
|
|
}, [gameConfig]);
|
|
}
|