pa-react-themes/context/ThemeProvider.jsx

React Native Themes

import { createContext, useState, useContext, useMemo } from 'react'

import config from '../../../theme.config'
import { ThemeData } from '../helpers/theme'
import { initTheme } from '../funcs';

const ThemeContext = createContext()

export const useThemeProvider = (platformSet, modeSet) => {
    const [type, setType] = useState(undefined);
    const [themeType, setThemeType] = useState(undefined)
    const [themeData, setThemeData] = useState(undefined);
    const [mode, setMode] = useState('light')
    const [platform, setPlatform] = useState('web')

    useMemo(() => {
        if (config.type)
            setType(config.type)
        if (config.themeType)
            setThemeType(config.themeType)
        if (config.themeFiles)
            setThemeData(ThemeData())

        setMode(modeSet)
        setPlatform(platformSet)
    }, []);

    useMemo(() => {
        initTheme(platform, mode, type, themeData)
    }, [platform, mode, type, themeData])

    return {
        type,
        setType,
        themeType,
        setThemeType,
        themeData,
        setThemeData,
        mode,
        setMode,
        platform,
        setPlatform
    };
}

export const ThemeProvider = ({ platform, mode, children }) => {
    const themeProviderValue = useThemeProvider(platform, mode);
    
    return (
        <ThemeContext.Provider value={themeProviderValue}>
            {children}
        </ThemeContext.Provider>
    );
}

export const useTheme = () => {
    const themeContext = useContext(ThemeContext);
    if (!themeContext) {
        throw new Error('useTheme must be used within a ThemeProvider');
    }
    return themeContext;
}