mirror of https://github.com/tooot-app/app
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React, { createContext, useContext, useEffect, useState } from 'react'
|
|
import { Appearance, useColorScheme } from 'react-native-appearance'
|
|
import { ColorDefinitions, getTheme } from 'src/utils/styles/themes'
|
|
|
|
const osTheme = Appearance.getColorScheme() as 'light' | 'dark'
|
|
|
|
export const ManageThemeContext: React.Context<{
|
|
mode: 'light' | 'dark'
|
|
theme: { [key in ColorDefinitions]: string }
|
|
toggle: () => void
|
|
}> = createContext({
|
|
mode: osTheme,
|
|
theme: getTheme(osTheme),
|
|
toggle: () => {}
|
|
})
|
|
|
|
export const useTheme = () => useContext(ManageThemeContext)
|
|
|
|
const ThemeManager: React.FC = ({ children }) => {
|
|
const [mode, setMode] = useState(osTheme)
|
|
const systemTheme = useColorScheme()
|
|
|
|
const toggleTheme = () => {
|
|
mode === 'light' ? setMode('dark') : setMode('light')
|
|
}
|
|
|
|
useEffect(() => {
|
|
setMode(systemTheme === 'no-preference' ? 'light' : systemTheme)
|
|
}, [systemTheme])
|
|
|
|
return (
|
|
<ManageThemeContext.Provider
|
|
value={{
|
|
mode: mode,
|
|
theme: getTheme(mode),
|
|
toggle: toggleTheme
|
|
}}
|
|
>
|
|
{children}
|
|
</ManageThemeContext.Provider>
|
|
)
|
|
}
|
|
|
|
export default ThemeManager
|