@mtec-solutions-org/design-system/dist/contexts/DripsyThemeProvider.js

A React Native Web design system library with theme and components

import { jsx as _jsx } from "react/jsx-runtime";
import { DripsyProvider } from "@dripsy/core";
import { useColorScheme } from "react-native";
import { darkTheme, lightTheme } from "../theme";
import { createContext, useCallback, useContext, useMemo, useState, } from "react";
import { THEMES } from "../constants";
const ThemeContext = createContext({
    theme: THEMES.LIGHT,
    toggleTheme: () => { },
});
export const useThemeContext = () => useContext(ThemeContext);
export const DripsyThemeProvider = ({ children, overrideTheme }) => {
    const colorScheme = useColorScheme(); // returns THEMES.LIGHT | THEMES.DARK | null
    const [theme, setTheme] = useState(colorScheme ?? THEMES.LIGHT);
    const toggleTheme = useCallback(() => {
        setTheme((prev) => (prev === THEMES.LIGHT ? THEMES.DARK : THEMES.LIGHT));
    }, []);
    const selectedTheme = useMemo(() => {
        if (overrideTheme) {
            return overrideTheme;
        }
        return theme === THEMES.LIGHT ? lightTheme : darkTheme;
    }, [theme, overrideTheme]);
    const contextValue = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);
    return (_jsx(ThemeContext.Provider, { value: contextValue, children: _jsx(DripsyProvider, { theme: selectedTheme, children: children }) }));
};