Files
boWave/dashboard/src/contexts/ThemeContext.jsx
denshooter 4fab26106c Phase 1: Modern glassmorphic design system with light/dark mode
- 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>
2026-03-27 14:56:16 +01:00

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
}