final.tsx

import React from 'react';

interface ThemeProps {
	color: string;
	backgroundColor: string;
}

interface Theme {
	theme: ThemeProps;
}
const themes = {
	light: {
		color: '#504b4b',
		backgroundColor: '#ffffff',
	},
	dark: {
		color: '#ffffff',
		backgroundColor: '#504b4b',
	},
	brown: {
		color: '#ffffff',
		backgroundColor: '#795548',
	},
};

type Dispatch = (theme: Theme) => void;

const ThemeStateContext = React.createContext<Theme | undefined>(undefined);
const ThemeDispatchContext = React.createContext<Dispatch | undefined>(undefined);

function ThemeProvider({ children }: any) {
	const [theme, setTheme] = React.useState({ theme: themes.light });
	return (
		<ThemeStateContext.Provider value={theme}>
			<ThemeDispatchContext.Provider value={setTheme}>{children}</ThemeDispatchContext.Provider>
		</ThemeStateContext.Provider>
	);
}

function useThemeState() {
	const context = React.useContext(ThemeStateContext);
	if (context === undefined) {
		throw new Error('useCountState must be used within a CountProvider');
	}
	return context;
}

function useThemeDispatch() {
	const context = React.useContext(ThemeDispatchContext);
	if (context === undefined) {
		throw new Error('useCountDispatch must be used within a CountProvider');
	}
	return context;
}

export { ThemeProvider, useThemeState, useThemeDispatch, Theme, themes };