44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import React, { createContext, useContext, useEffect, useMemo } from 'react';
|
|
import { useColorScheme } from 'react-native';
|
|
import { useThemeStore } from '../store/themeStore';
|
|
import { colors, darkColors } from '../constants/theme';
|
|
import type { AppColors } from '../hooks/useThemeColor';
|
|
|
|
interface ThemeContextValue {
|
|
colors: AppColors;
|
|
isDark: boolean;
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextValue>({
|
|
colors,
|
|
isDark: false,
|
|
});
|
|
|
|
export function useThemeContext() {
|
|
return useContext(ThemeContext);
|
|
}
|
|
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
const systemScheme = useColorScheme();
|
|
const mode = useThemeStore((s) => s.mode);
|
|
const init = useThemeStore((s) => s.init);
|
|
|
|
useEffect(() => {
|
|
init();
|
|
}, []);
|
|
|
|
const value = useMemo(() => {
|
|
const isDark = mode === 'dark' || (mode === 'system' && systemScheme === 'dark');
|
|
return {
|
|
colors: isDark ? darkColors : colors,
|
|
isDark,
|
|
};
|
|
}, [mode, systemScheme]);
|
|
|
|
return (
|
|
<ThemeContext.Provider value={value}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|