theme-provider.tsx•1.44 kB
"use client"
import React, { useEffect, useState } from 'react'
import { useTheme } from '@/lib/store'
interface ThemeProviderProps {
children: React.ReactNode
}
export function ThemeProvider({ children }: ThemeProviderProps) {
const [mounted, setMounted] = useState(false)
const { theme, setTheme } = useTheme()
useEffect(() => {
setMounted(true)
// Initialize theme on mount
const initializeTheme = () => {
const isDark = theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
if (isDark) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
}
initializeTheme()
// Listen for system theme changes
if (theme === 'system') {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
const handleChange = () => {
setTheme('system') // This will re-trigger the theme calculation
}
mediaQuery.addEventListener('change', handleChange)
return () => mediaQuery.removeEventListener('change', handleChange)
}
}, [theme, setTheme])
// Prevent hydration mismatch by not rendering until mounted
if (!mounted) {
return (
<div className="min-h-screen bg-background" suppressHydrationWarning>
{children}
</div>
)
}
return <>{children}</>
}