feat: add themes

src/ThemeProvider.tsx

@@ -0,0 +1,48 @@
+import { normalTheme, Theme } from "./themes";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+interface ThemeContextProps {
+  children: ReactNode;
+}
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const themeContext = createContext<ThemeContextValue>({
+  theme: normalTheme,
+  setTheme: () => {},
+});
+
+const ThemeProvider = ({ children }: ThemeContextProps) => {
+  const [theme, setTheme] = useState(normalTheme);
+  useEffect(() => {
+    if (theme.backgroundColor) {
+      document.body.style.backgroundColor = theme.backgroundColor;
+      document.body.style.backgroundImage = "unset";
+    } else if (theme.backgroundImage) {
+      document.body.style.backgroundColor = "unset";
+      document.body.style.backgroundImage = theme.backgroundImage;
+    }
+    document.body.style.color = theme.textColor;
+  }, [theme]);
+
+  return (
+    <themeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </themeContext.Provider>
+  );
+};
+
+function useTheme() {
+  return useContext(themeContext);
+}
+
+export { ThemeProvider, useTheme };

src/themes.ts

@@ -0,0 +1,24 @@
+export interface Theme {
+  backgroundColor?: string;
+  backgroundImage?: string;
+  textColor: string;
+}
+
+export const normalTheme: Theme = {
+  backgroundColor: "aliceblue",
+  textColor: "black",
+};
+export const darkTheme: Theme = {
+  backgroundColor: "#444",
+  textColor: "white",
+};
+export const colourTheme: Theme = {
+  backgroundImage:
+    "linear-gradient(45deg, magenta, rebeccapurple, dodgerblue, green)",
+  textColor: "white",
+};
+export const rainbowTheme: Theme = {
+  backgroundImage:
+    "linear-gradient(135deg, #FF0000, #FFA500, #888800, #008000, #0000FF, #4B0082, #800080 ",
+  textColor: "white",
+};