consultoria-as
43021b9c3c
- Backend: FastAPI + Python-SocketIO + SQLAlchemy - Models for categories, questions, game sessions, events - AI services for answer validation and question generation (Claude) - Room management with Redis - Game logic with stealing mechanics - Admin API for question management - Frontend: React + Vite + TypeScript + Tailwind - 5 visual themes (DRRR, Retro, Minimal, RGB, Anime 90s) - Real-time game with Socket.IO - Achievement system - Replay functionality - Sound effects per theme - Docker Compose for deployment - Design documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import { useEffect, type ReactNode } from 'react'
|
|
import { useThemeStore, themes } from '../stores/themeStore'
|
|
|
|
interface ThemeProviderProps {
|
|
children: ReactNode
|
|
}
|
|
|
|
export function ThemeProvider({ children }: ThemeProviderProps) {
|
|
const { currentTheme } = useThemeStore()
|
|
const theme = themes[currentTheme]
|
|
|
|
useEffect(() => {
|
|
// Apply CSS variables
|
|
const root = document.documentElement
|
|
root.style.setProperty('--color-bg', theme.colors.bg)
|
|
root.style.setProperty('--color-primary', theme.colors.primary)
|
|
root.style.setProperty('--color-secondary', theme.colors.secondary)
|
|
root.style.setProperty('--color-accent', theme.colors.accent)
|
|
root.style.setProperty('--color-text', theme.colors.text)
|
|
root.style.setProperty('--color-text-muted', theme.colors.textMuted)
|
|
root.style.setProperty('--font-heading', theme.fonts.heading)
|
|
root.style.setProperty('--font-body', theme.fonts.body)
|
|
|
|
// Apply body background
|
|
document.body.style.backgroundColor = theme.colors.bg
|
|
document.body.style.color = theme.colors.text
|
|
|
|
// Add theme class to body
|
|
document.body.className = `theme-${currentTheme}`
|
|
}, [currentTheme, theme])
|
|
|
|
return <>{children}</>
|
|
}
|
|
|
|
// Theme-aware component wrapper
|
|
export function useThemeStyles() {
|
|
const { currentTheme, getThemeConfig } = useThemeStore()
|
|
const config = getThemeConfig()
|
|
|
|
return {
|
|
theme: currentTheme,
|
|
config,
|
|
styles: {
|
|
// Background styles
|
|
bgPrimary: { backgroundColor: config.colors.bg },
|
|
bgSecondary: { backgroundColor: config.colors.primary + '20' },
|
|
|
|
// Text styles
|
|
textPrimary: { color: config.colors.text },
|
|
textSecondary: { color: config.colors.textMuted },
|
|
textAccent: { color: config.colors.primary },
|
|
|
|
// Border styles
|
|
borderPrimary: { borderColor: config.colors.primary },
|
|
borderSecondary: { borderColor: config.colors.secondary },
|
|
|
|
// Effect classes
|
|
glowEffect: config.effects.glow ? 'text-shadow-neon' : '',
|
|
scanlineEffect: config.effects.scanlines ? 'crt-scanlines' : '',
|
|
glitchEffect: config.effects.glitch ? 'glitch-text' : '',
|
|
sparkleEffect: config.effects.sparkles ? 'sparkle' : '',
|
|
rgbEffect: config.effects.rgbShift ? 'animate-rgb-shift' : '',
|
|
},
|
|
}
|
|
}
|