61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import React, { createContext, useContext, useEffect, useState } from 'react';
|
|
import { useColorScheme as useNativeColorScheme } from 'react-native';
|
|
|
|
type ThemeMode = 'light' | 'dark' | 'system';
|
|
|
|
interface ThemeContextType {
|
|
themeMode: ThemeMode;
|
|
setThemeMode: (mode: ThemeMode) => void;
|
|
colorScheme: 'light' | 'dark'; // The actual active scheme
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextType>({
|
|
themeMode: 'system',
|
|
setThemeMode: () => { },
|
|
colorScheme: 'light',
|
|
});
|
|
|
|
export const THEME_STORAGE_KEY = 'user_theme_preference';
|
|
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
const systemColorScheme = useNativeColorScheme();
|
|
const [themeMode, setThemeModeState] = useState<ThemeMode>('system');
|
|
const [isReady, setIsReady] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Load preference from storage on mount
|
|
AsyncStorage.getItem(THEME_STORAGE_KEY).then((value) => {
|
|
if (value && (value === 'light' || value === 'dark' || value === 'system')) {
|
|
setThemeModeState(value as ThemeMode);
|
|
}
|
|
setIsReady(true);
|
|
});
|
|
}, []);
|
|
|
|
const setThemeMode = async (mode: ThemeMode) => {
|
|
setThemeModeState(mode);
|
|
await AsyncStorage.setItem(THEME_STORAGE_KEY, mode);
|
|
};
|
|
|
|
// Determine effective color scheme
|
|
const colorScheme =
|
|
themeMode === 'system'
|
|
? (systemColorScheme ?? 'light')
|
|
: themeMode;
|
|
|
|
if (!isReady) {
|
|
return null; // Or a splash screen
|
|
}
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ themeMode, setThemeMode, colorScheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useTheme() {
|
|
return useContext(ThemeContext);
|
|
}
|