Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 25x 25x 25x 25x 25x 13x 13x 13x 8x 8x 13x 13x 13x 13x 13x 25x 25x 25x 25x 8x 8x 1x 1x 25x 25x 25x 25x 13x 8x 8x 13x 5x 5x 25x 25x 25x 25x 19x 19x 19x 19x 25x 25x 25x 4x 4x 4x 25x 25x 25x 25x 25x 25x 25x 1x 1x 27x 27x 4x 4x 23x 23x | 'use client'
import type React from 'react'
import { createContext, useContext, useEffect, useState } from 'react'
type Theme = 'light' | 'dark' | 'system'
type ResolvedTheme = 'light' | 'dark'
interface ThemeContextType {
theme: Theme
resolvedTheme: ResolvedTheme
setTheme: (theme: Theme) => void
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setThemeState] = useState<Theme>('system')
const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('dark')
// Detect system preference
useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
const handleChange = () => {
if (theme === 'system') {
setResolvedTheme(mediaQuery.matches ? 'dark' : 'light')
}
}
handleChange()
mediaQuery.addEventListener('change', handleChange)
return () => mediaQuery.removeEventListener('change', handleChange)
}, [theme])
// Load saved theme preference
useEffect(() => {
const saved = localStorage.getItem('theme') as Theme | null
if (saved) {
setThemeState(saved)
}
}, [])
// Update resolved theme when theme changes
useEffect(() => {
if (theme === 'system') {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
setResolvedTheme(isDark ? 'dark' : 'light')
} else {
setResolvedTheme(theme)
}
}, [theme])
// Apply theme to document
useEffect(() => {
const root = document.documentElement
root.setAttribute('data-theme', resolvedTheme)
root.classList.remove('light', 'dark')
root.classList.add(resolvedTheme)
}, [resolvedTheme])
const setTheme = (newTheme: Theme) => {
setThemeState(newTheme)
localStorage.setItem('theme', newTheme)
}
return (
<ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
{children}
</ThemeContext.Provider>
)
}
export function useTheme() {
const context = useContext(ThemeContext)
if (context === undefined) {
throw new Error('useTheme must be used within a ThemeProvider')
}
return context
}
|