Untitled

// theme.tsx

import AsyncStorage from "@react-native-async-storage/async-storage";
import { createContext, useContext, useEffect, useState } from 'react';

export type Theme = {
    BACKGROUND: string;
    PRIMARY: string;
};

export const LIGHT: Theme = {
    BACKGROUND: "rgba(238, 230, 232, 1)",
    PRIMARY: "rgba(244, 244, 244, 1)",
}
export const DARK: Theme = {
    BACKGROUND: "rgba(7, 7, 7, 1)",
    PRIMARY: "rgba(39, 39, 38, 1)",
}

const ThemeContext = createContext({
    theme: LIGHT,
    toggleTheme: () => { },
});

type Props = {
    children?: React.ReactNode;
};

export default function ThemeProvider({ children }: Props) {
    const [theme, setTheme] = useState<Theme>(DARK);

    useEffect(() => {
        (async () => {
            const storedTheme = await AsyncStorage.getItem("theme");
            if (storedTheme == null) {
                await AsyncStorage.setItem("theme", "dark");
                setTheme(DARK);
            }
            else if (storedTheme === "dark") {
                setTheme(DARK);
            } else {
                setTheme(LIGHT);
            }
        })();
    }, []);

    const toggleTheme = async () => {
        await AsyncStorage.setItem("theme", theme === LIGHT ? "dark" : "light");
        setTheme(prev => prev === LIGHT ? DARK : LIGHT);
    };

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

export const useTheme = () => useContext(ThemeContext);