feat: select theme

src/app/components/UserMenu.tsx

@@ -5,13 +5,20 @@ import Image from "next/image";
 import { signOut } from "next-auth/react";
 import { Menu, Transition } from "@headlessui/react";
 import { HiOutlineLogout } from "react-icons/hi";
+import { useTheme } from "~/app/providers/theme";
 
 interface UserMenuProps {
   imageUrl: string | undefined;
   email: string;
 }
 
+function classNames(...classes: string[]): string {
+  return classes.filter(Boolean).join(" ");
+}
+
 export default function UserMenu({ imageUrl, email }: UserMenuProps) {
+  const { theme, switchTheme } = useTheme();
+
   return (
     <Menu as="div" className="relative inline-block w-full text-left">
       <div>
@@ -49,18 +56,64 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
         leaveTo="transform opacity-0 scale-95"
       >
         <Menu.Items className="absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="flex w-full">
-            <Menu.Item>
-              {() => (
+          <div className="flex flex-col">
+            <div className="p-1">
+              <div className="flex w-full items-center px-3 py-2 text-left text-xs text-dark-1000">
+                <span>Theme</span>
+              </div>
+              <Menu.Item>
+                <button
+                  onClick={() => switchTheme("system")}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+                >
+                  <span
+                    className={classNames(
+                      theme === "system" ? "visible" : "invisible",
+                      "mr-4 h-[6px] w-[6px] rounded-full bg-dark-900",
+                    )}
+                  />
+                  System
+                </button>
+              </Menu.Item>
+              <Menu.Item>
+                <button
+                  onClick={() => switchTheme("dark")}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+                >
+                  <span
+                    className={classNames(
+                      theme === "dark" ? "visible" : "invisible",
+                      "mr-4 h-[6px] w-[6px] rounded-full bg-dark-900",
+                    )}
+                  />
+                  Dark
+                </button>
+              </Menu.Item>
+              <Menu.Item>
+                <button
+                  onClick={() => switchTheme("light")}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+                >
+                  <span
+                    className={classNames(
+                      theme === "light" ? "visible" : "invisible",
+                      "mr-4 h-[6px] w-[6px] rounded-full bg-dark-900",
+                    )}
+                  />
+                  Light
+                </button>
+              </Menu.Item>
+            </div>
+            <div className="border-t-[1px] border-dark-500 p-1">
+              <Menu.Item>
                 <button
                   onClick={() => signOut({ callbackUrl: "/boards" })}
-                  className="m-1 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+                  className=" flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
                 >
-                  <HiOutlineLogout size={18} className="mr-2" />
                   Logout
                 </button>
-              )}
-            </Menu.Item>
+              </Menu.Item>
+            </div>
           </div>
         </Menu.Items>
       </Transition>

src/app/components/dashboard.tsx

@@ -13,7 +13,7 @@ export default async function Dashboard(props: { children: React.ReactNode }) {
   }
 
   return (
-    <main className="flex h-screen flex-col items-center bg-dark-50">
+    <main className="bg-light-50 flex h-screen flex-col items-center dark:bg-dark-50">
       <div className="m-auto flex h-16 w-full justify-between border-b border-dark-600 px-5 py-2 align-middle">
         <div className="my-auto flex w-full items-center justify-between">
           <h1 className="text-lg font-bold tracking-tight text-dark-1000">

src/app/layout.tsx

@@ -6,6 +6,7 @@ import { headers } from "next/headers";
 import { TRPCReactProvider } from "~/trpc/react";
 import { ModalProvider } from "~/app/providers/modal";
 import { BoardProvider } from "~/app/providers/board";
+import { ThemeProvider } from "./providers/theme";
 
 const jakarta = Plus_Jakarta_Sans({
   subsets: ["latin"],
@@ -27,11 +28,13 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${jakarta.variable}`}>
       <body className="h-screen overflow-hidden font-sans">
-        <TRPCReactProvider headers={headers()}>
-          <ModalProvider>
-            <BoardProvider>{children}</BoardProvider>
-          </ModalProvider>
-        </TRPCReactProvider>
+        <ThemeProvider>
+          <TRPCReactProvider headers={headers()}>
+            <ModalProvider>
+              <BoardProvider>{children}</BoardProvider>
+            </ModalProvider>
+          </TRPCReactProvider>
+        </ThemeProvider>
       </body>
     </html>
   );

src/app/providers/theme.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+interface ThemeContextProps {
+  theme: string;
+  switchTheme: (theme: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [theme, setTheme] = useState("");
+
+  const switchTheme = (theme: string) => {
+    if (theme === "system") {
+      localStorage.removeItem("theme");
+    } else {
+      if (theme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+
+      localStorage.theme = theme;
+    }
+    setTheme(theme);
+  };
+
+  useEffect(() => {
+    if (!("theme" in localStorage)) {
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+      setTheme("system");
+    } else {
+      if (localStorage.theme === "dark") {
+        document.documentElement.classList.add("dark");
+        setTheme("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+        setTheme("light");
+      }
+    }
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ switchTheme, theme }}>
+      {theme.length ? children : null}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextProps => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};