26 lines
1.1 KiB
TypeScript
26 lines
1.1 KiB
TypeScript
'use client'
|
|
import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
|
|
|
|
type Theme = 'light' | 'dark'
|
|
interface ThemeContextType { theme: Theme; toggleTheme: () => void }
|
|
const ThemeContext = createContext<ThemeContextType>({ theme: 'dark', toggleTheme: () => {} })
|
|
|
|
export function useTheme() { return useContext(ThemeContext) }
|
|
|
|
export function ThemeProvider({ children }: { children: ReactNode }) {
|
|
const [theme, setTheme] = useState<Theme>('dark')
|
|
useEffect(() => {
|
|
const stored = localStorage.getItem('theme') as Theme | null
|
|
if (stored) { setTheme(stored); document.documentElement.classList.toggle('dark', stored === 'dark') }
|
|
else {
|
|
const d = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
|
setTheme(d); document.documentElement.classList.toggle('dark', d === 'dark')
|
|
}
|
|
}, [])
|
|
const toggleTheme = () => {
|
|
const n = theme === 'dark' ? 'light' : 'dark'
|
|
setTheme(n); localStorage.setItem('theme', n); document.documentElement.classList.toggle('dark', n === 'dark')
|
|
}
|
|
return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>
|
|
}
|