feat: select theme

2024-03-31 17:06:29 +01:00
parent 0b51d857a9
commit e1cc789531
7 changed files with 155 additions and 13 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
    "postcss": "^8.4.27",
    "prettier": "^3.0.0",
    "prettier-plugin-tailwindcss": "^0.5.1",
+    "tailwind": "^4.0.0",
    "tailwind-scrollbar": "^3.0.5",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.1.6"
--- a/src/app/components/UserMenu.tsx
+++ b/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>
--- a/src/app/components/dashboard.tsx
+++ b/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">
--- a/src/app/layout.tsx
+++ b/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>
  );
--- a/src/app/providers/theme.tsx
+++ b/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;
+};
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,6 +2,7 @@ import { type Config } from "tailwindcss";

 export default {
  content: ["./src/**/*.tsx"],
+  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
@@ -10,6 +11,9 @@ export default {
      fontSize: {
        sm: "0.8rem",
      },
+      boxShadow: {
+        '3xl': '0px 16px 70px rgba(0, 0, 0, 0.5)',
+      },
      colors: {
        "dark-50": "#161616",
        "dark-100": "#1c1c1c",
@@ -23,6 +27,17 @@ export default {
        "dark-900": "#7e7e7e",
        "dark-950": "#bbb",
        "dark-1000": "#ededed",
+        "light-50": "hsl(0deg 0% 98.8%)",
+        "light-100": "hsl(0deg 0% 97.3%)",
+        "light-200": "hsl(0deg 0% 95.3%)",
+        "light-300": "hsl(0deg 0% 92.9%)",
+        "light-400": "hsl(0deg 0% 91%)",
+        "light-500": "hsl(0deg 0% 88.6%)",
+        "light-700": "hsl(0deg 0% 85.9%)",
+        "light-800": "hsl(0deg 0% 78%)",
+        "light-900": "hsl(0deg 0% 56.1%)",
+        "light-950": "hsl(0deg 0% 52.2%)",
+        "light-1000": "hsl(0deg 0% 43.5%)",
      },
      screens: {
        xxl: '1600px'