- Added glassmorphic components with backdrop blur and transparency * .glass-panel and .glass-card classes for frosted glass effect * Smooth transitions and hover animations * Proper light mode support via prefers-color-scheme and manual toggle - Implemented light/dark mode system * ThemeContext provider for global theme state * Persists user preference to localStorage * Theme toggle button in TopBar (☀️/🌙) * Automatic detection of system preference - Enhanced UI components with modern animations * Updated button styles with primary, ghost, and icon variants * Smooth transitions (cubic-bezier curves) * Slide/fade animations on component mount * Hover effects with subtle shadows - Improved visual design * Updated color scheme (brighter accent: #0ea5e9) * Better visual hierarchy in typography * Refined spacing and padding * Glass effect on panels and cards - Updated components: * TopBar: Added theme toggle * TabNav: Smooth transitions and glassmorphic styling * ZoneCard: Glassmorphic cards with hover effects * ZoneGrid: Frosted panel design - Build: 65 modules, 184.27 KB (57.47 KB gzipped) - All hot reloading working smoothly Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
36 lines
969 B
JavaScript
36 lines
969 B
JavaScript
import { createContext, useContext, useEffect, useState } from 'react'
|
|
|
|
const ThemeContext = createContext()
|
|
|
|
export function ThemeProvider({ children }) {
|
|
const [isDark, setIsDark] = useState(() => {
|
|
const saved = localStorage.getItem('theme')
|
|
if (saved) return saved === 'dark'
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
})
|
|
|
|
useEffect(() => {
|
|
const root = document.documentElement
|
|
if (isDark) {
|
|
root.classList.remove('light-mode')
|
|
} else {
|
|
root.classList.add('light-mode')
|
|
}
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light')
|
|
}, [isDark])
|
|
|
|
const toggleTheme = () => setIsDark(prev => !prev)
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ isDark, toggleTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useTheme() {
|
|
const context = useContext(ThemeContext)
|
|
if (!context) throw new Error('useTheme must be used within ThemeProvider')
|
|
return context
|
|
}
|