Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment