31 lines
978 B
TypeScript
31 lines
978 B
TypeScript
import React, { createContext, useContext, useState, useEffect } from 'react'
|
|
import * as SecureStore from 'expo-secure-store'
|
|
|
|
type Theme = 'light' | 'dark'
|
|
interface ThemeCtx { theme: Theme; toggleTheme: () => void; isDark: boolean }
|
|
|
|
export const ThemeContext = createContext<ThemeCtx>({
|
|
theme: 'light', toggleTheme: () => {}, isDark: false,
|
|
})
|
|
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
const [theme, setTheme] = useState<Theme>('light')
|
|
useEffect(() => {
|
|
SecureStore.getItemAsync('grd_theme').then(v => {
|
|
if (v === 'dark') setTheme('dark')
|
|
})
|
|
}, [])
|
|
const toggleTheme = () => {
|
|
const next: Theme = theme === 'light' ? 'dark' : 'light'
|
|
setTheme(next)
|
|
SecureStore.setItemAsync('grd_theme', next)
|
|
}
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, toggleTheme, isDark: theme === 'dark' }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
)
|
|
}
|
|
|
|
export const useTheme = () => useContext(ThemeContext)
|