60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import React, { createContext, useContext, useEffect, useState } from 'react';
|
|
import { Appearance } from 'react-native';
|
|
|
|
type ThemeType = 'light' | 'dark';
|
|
|
|
interface ThemeContextProps {
|
|
theme: ThemeType;
|
|
isDark: boolean;
|
|
toggleTheme: () => void;
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextProps | null>(null);
|
|
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
const systemTheme = Appearance.getColorScheme();
|
|
|
|
const [theme, setTheme] = useState<ThemeType>(systemTheme === 'dark' ? 'dark' : 'light');
|
|
|
|
// 🔹 Load saved theme
|
|
useEffect(() => {
|
|
(async () => {
|
|
const savedTheme = await AsyncStorage.getItem('APP_THEME');
|
|
if (savedTheme === 'dark' || savedTheme === 'light') {
|
|
setTheme(savedTheme);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
// 🔹 Save theme
|
|
useEffect(() => {
|
|
AsyncStorage.setItem('APP_THEME', theme);
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider
|
|
value={{
|
|
theme,
|
|
isDark: theme === 'dark',
|
|
toggleTheme,
|
|
}}
|
|
>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
// Custom hook
|
|
export function useTheme() {
|
|
const ctx = useContext(ThemeContext);
|
|
if (!ctx) {
|
|
throw new Error('useTheme must be used inside ThemeProvider');
|
|
}
|
|
return ctx;
|
|
}
|