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 };