62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import {
|
|
createContext,
|
|
useContext,
|
|
useState,
|
|
useEffect,
|
|
ReactNode,
|
|
} from "react";
|
|
|
|
// Defines the Theme (Colour Theme) that would be shared/used
|
|
interface ThemeContextType {
|
|
theme: string;
|
|
setTheme: (theme: string) => void;
|
|
}
|
|
|
|
// Store theme and provide access to setTheme function
|
|
// If no provider is used, set to undefined
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
|
|
|
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
|
|
// Set default theme to dark
|
|
|
|
const [theme, setTheme] = useState<string>(() => {
|
|
// If exist on user cache, use that instead
|
|
return localStorage.getItem("user-theme") || "dark";
|
|
});
|
|
|
|
useEffect(() => {
|
|
// Store current theme set by user
|
|
localStorage.setItem("user-theme", theme);
|
|
|
|
// Update the theme
|
|
document.body.setAttribute("data-theme", theme);
|
|
}, [theme]);
|
|
|
|
return (
|
|
// Sets the selected theme to child component
|
|
<ThemeContext.Provider value={{ theme, setTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|
|
|
|
// Custom Hook which allows any component to access theme & setTheme with "useTheme()"
|
|
export const useTheme = () => {
|
|
const context = useContext(ThemeContext); //Retrieves current value of context
|
|
if (!context) {
|
|
throw new Error("useTheme must be used within a ThemeProvider"); //If called outside of ThemeContext.tsx, errorHandle
|
|
}
|
|
return context;
|
|
};
|
|
|
|
{
|
|
/**
|
|
|
|
createContext: Allow components to share data without directly passing props through multiple levels
|
|
useContext: Allows a component to access the current value of a context ("Hook")
|
|
useState: Manages state of a component ("Hook")
|
|
ReactNode: Allows to take in HTML / React / Arrays of Component
|
|
|
|
*/
|
|
}
|