Paul Trowbridge
738e1919ce
Port light/dark mode from pf_app: ThemeProvider context, CSS custom properties (Pro Dark palette), dark overrides for Tailwind classes, and Perspective viewer theme sync in Pivot. Toggle button in sidebar header. Improve toggle icons to Feather-style stroke SVGs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
26 lines
698 B
JavaScript
26 lines
698 B
JavaScript
import { createContext, useContext, useState, useEffect } from 'react'
|
|
|
|
const ThemeContext = createContext()
|
|
|
|
export function ThemeProvider({ children }) {
|
|
const [dark, setDark] = useState(() => {
|
|
const saved = localStorage.getItem('df_dark')
|
|
if (saved !== null) return saved === 'true'
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
})
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('df_dark', dark)
|
|
document.documentElement.classList.toggle('dark', dark)
|
|
}, [dark])
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ dark, setDark }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
)
|
|
}
|
|
|
|
const useTheme = () => useContext(ThemeContext)
|
|
export default useTheme
|