UMHelper · BoxMars · Oct 24, 2024
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,7 +3,7 @@ import '@smastrom/react-rating/style.css'
 
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
-import React from "react";
+import React, { useState, useEffect } from "react";
 
 import Navbar from "@/components/navbar";
 import { cn } from "@/lib/utils";
@@ -35,6 +35,20 @@ export default function RootLayout({
 }: {
     children: React.ReactNode
 }) {
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    useEffect(() => {
+        if (isDarkMode) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    }, [isDarkMode]);
+
+    const toggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+    };
+
     return (
         <ClerkProvider>
             <html lang="en">
@@ -56,7 +70,7 @@ export default function RootLayout({
                 </head>
                 <body className={cn(inter.className)}>
                     <div className='min-h-screen min-w-full'>
-                        <Navbar />
+                        <Navbar isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
                         <div className='w-full px-1 py-2 flex flex-col justify-center items-center bg-slate-100 text-slate-800 text-xs space-y-1'>
                             <div>
                                 本網站與澳門大學不隸屬、關聯、授權、認可或以任何方式正式關聯。

diff --git a/app/page.tsx b/app/page.tsx
@@ -120,4 +120,4 @@ function HomePage() {
     )
 }
 
-export default HomePage
+export default HomePage
diff --git a/components/comment-bank.tsx b/components/comment-bank.tsx
@@ -7,7 +7,7 @@ export default async function CommentBank() {
     const statistics:any = await getStatistics();
     return (
         <div className="flex flex-wrap justify-center	">
-            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md ">
+            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
                 <Newspaper size={80} strokeWidth={1} className="pb-3" />
                 <Link href="https://www.umeh.top/catalog/FAH" className="text-lg">
                     FAH
@@ -19,7 +19,7 @@ export default async function CommentBank() {
                     {statistics[0].comment_num} comments
                 </div>
             </Card>
-            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md ">
+            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
                 <CircleDollarSign size={80} strokeWidth={1} className="pb-3 " />
                 <Link href="https://www.umeh.top/catalog/FBA" className="text-lg">
                     FBA
@@ -31,7 +31,7 @@ export default async function CommentBank() {
                     {statistics[1].comment_num} comments
                 </div>
             </Card>
-            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md ">
+            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
                 <School size={80} strokeWidth={1} className="pb-3 " />
                 <Link href="https://www.umeh.top/catalog/FED" className="text-lg">
                     FED
@@ -43,7 +43,7 @@ export default async function CommentBank() {
                     {statistics[2].comment_num} comments
                 </div>
             </Card>
-            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md ">
+            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
                 <Microscope size={80} strokeWidth={1} className="pb-3 " />
                 <Link href="https://www.umeh.top/catalog/FHS" className="text-lg">
                     FHS
@@ -55,7 +55,7 @@ export default async function CommentBank() {
                     {statistics[3].comment_num} comments
                 </div>
             </Card>
-            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md ">
+            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
                 <Scale size={80} strokeWidth={1} className="pb-3 " />
                 <Link href="https://www.umeh.top/catalog/FLL" className="text-lg">
                     FLL
@@ -67,7 +67,7 @@ export default async function CommentBank() {
                     {statistics[4].comment_num} comments
                 </div>
             </Card>
-            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md ">
+            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
                 <BookMarked size={80} strokeWidth={1} className="pb-3 " />
                 <Link href="https://www.umeh.top/catalog/FSS" className="text-lg">
                     FSS
@@ -79,7 +79,7 @@ export default async function CommentBank() {
                     {statistics[5].comment_num} comments
                 </div>
             </Card>
-            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md ">
+            <Card className="flex flex-col items-center p-4 m-2 min-w-[20%] dark:bg-gray-800 rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
                 <Bot size={80} strokeWidth={1} className="pb-3 " />
                 <Link href="https://www.umeh.top/catalog/FST" className="text-lg">
                     FST
@@ -93,4 +93,4 @@ export default async function CommentBank() {
             </Card>
         </div>
     );
-}
+}
diff --git a/components/comment-card.tsx b/components/comment-card.tsx
@@ -481,7 +481,7 @@ export const CommentCard = (
     { comment, reply_comment }: { comment: any, reply_comment: any[] }
 ) => {
     return (
-        <Card className=' hover:shadow-lg mx-auto'>
+        <Card className=' hover:shadow-lg mx-auto dark:bg-gray-800 dark:text-white'>
             <CardHeader className='pb-2 pt-4'  >
                 <div className='flex justify-between'>
                     <Popover>
@@ -584,9 +584,9 @@ export const CommentCard = (
             </CardContent>
             {//<Separator className='my-2' />
             }
-            <CardFooter className='block bg-gray-50 py-1 pl-5'>
+            <CardFooter className='block bg-gray-50 py-1 pl-5 dark:bg-gray-700'>
                 <ReplyComponent comment={comment} reply_comment={reply_comment} />
             </CardFooter>
         </Card>
     )
-}
+}
diff --git a/components/mobile-sidebar.tsx b/components/mobile-sidebar.tsx
@@ -13,12 +13,24 @@ import NavbarAvatar from "@/components/navbar-avatar";
 import { SignInButton, SignedOut } from "@clerk/nextjs";
 import { useState } from "react";
 import SearchButton from "@/components/search-button";
+import { Switch } from "@/components/ui/switch";
 
 const MobileSidebar = () => {
     const pathname = usePathname()
     const menuList = menu
     const [open, setOpen] = useState(false);
+    const [isDarkMode, setIsDarkMode] = useState(false);
     const wait = () => new Promise((resolve) => setTimeout(resolve, 100));
+
+    const toggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+        if (isDarkMode) {
+            document.documentElement.classList.remove('dark');
+        } else {
+            document.documentElement.classList.add('dark');
+        }
+    };
+
     return (
         <div className='md:hidden h-full flex justify-center items-center pr-2'>
             <Sheet open={open} onOpenChange={setOpen}>
@@ -51,6 +63,9 @@ const MobileSidebar = () => {
                             <SignInButton mode="modal" redirectUrl={pathname}/>
                         </SignedOut>
                         </div>
+                        <div className="flex justify-start items-center px-1 py-2">
+                            <Switch checked={isDarkMode} onCheckedChange={toggleDarkMode} />
+                        </div>
                     </div>
 
                 </SheetContent>

diff --git a/components/navbar-avatar.tsx b/components/navbar-avatar.tsx
@@ -13,7 +13,7 @@ export default function NavbarAvatar() {
     const pathname = usePathname()
     // console.log(pathname)
     return (
-        <div className="flex md:justify-center items-center">
+        <div className="flex md:justify-center items-center dark:bg-gray-800 dark:text-white">
             <SignedIn>
                 {/* Mount the UserButton component */}
                 <UserButton afterSignOutUrl={pathname}/>
@@ -26,4 +26,4 @@ export default function NavbarAvatar() {
             </SignedOut>
         </div >
     )
-}
+}
diff --git a/components/navbar-list.tsx b/components/navbar-list.tsx
@@ -13,13 +13,13 @@ export default function NavbarList() {
     const [timetableCart, setTimetableCart] = useLocalStorage<any[]>('timetableCart', [])
 
     return (
-        <div className="flex flex-wrap items-center justify-start ">
+        <div className="flex flex-wrap items-center justify-start dark:bg-gray-800 dark:text-white">
                 <Link href="/" className="flex items-center mr-10">
                     <Cat size={24} strokeWidth={2} color='rgb(14 165 233)' className="me-2"/>
                     <span className="hidden md:flex self-center text-lg md:text-2xl font-semibold whitespace-nowrap bg-gradient-to-r from-sky-500 to-indigo-600 bg-clip-text text-transparent">What2Reg @UM</span>
                 </Link>
             <div className="hidden w-full md:block md:w-auto">
-                <div className="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white">
+                <div className="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-white md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white">
                     {menuList.map((menu: MenuItem) => {
                         return (
                             <div className="flex flex-row items-center justify-start space-x-0.5" key={menu.href}>
@@ -39,4 +39,4 @@ export default function NavbarList() {
             </div>
         </div>
     );
-}
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -4,9 +4,21 @@ import NavbarAvatar from '@/components/navbar-avatar';
 import TimetableCart from "@/components/timetable-cart";
 import { UserButton } from "@clerk/nextjs";
 import SearchButton from "@/components/search-button";
-
+import { Switch } from "@/components/ui/switch";
+import { useState } from "react";
 
 const Navbar = () => {
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    const toggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+        if (isDarkMode) {
+            document.documentElement.classList.remove('dark');
+        } else {
+            document.documentElement.classList.add('dark');
+        }
+    };
+
     return (
         <div className="bg-white border-gray-200 max-w-screen-xl mx-auto p-4 ">
             <div className='flex flex-row justify-between'>
@@ -19,11 +31,12 @@ const Navbar = () => {
                         <SearchButton />
                         <TimetableCart />
                         <NavbarAvatar />
+                        <Switch checked={isDarkMode} onCheckedChange={toggleDarkMode} />
                     </div>
                 </div>
             </div>
         </div>
     )
 }
 
-export default Navbar
+export default Navbar
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
@@ -14,7 +14,7 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b", className)}
+    className={cn("border-b dark:border-gray-700", className)}
     {...props}
   />
 ))
@@ -28,13 +28,13 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 dark:text-gray-300",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 dark:text-gray-300" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
@@ -47,7 +47,7 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down dark:text-gray-300",
       className
     )}
     {...props}

diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
@@ -12,7 +12,7 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full bg-muted dark:bg-gray-800",
       className
     )}
     {...props}
@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "flex h-full w-full items-center justify-center rounded-full bg-muted dark:bg-gray-700",
       className
     )}
     {...props}

diff --git a/components/ui/card.tsx b/components/ui/card.tsx
@@ -17,7 +17,7 @@ const Card = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "rounded-lg border bg-card text-card-foreground shadow-sm",
+        "rounded-lg border bg-card text-card-foreground shadow-sm dark:bg-gray-800 dark:text-white",
         className
       )}
       {...props}

diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full dark:bg-gray-800 dark:text-white",
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ const DialogContentNoX = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full dark:bg-gray-800 dark:text-white",
         className
       )}
       {...props}
-Original file line number
+Diff line change
@@ Expand Up / @@ -120,4 +120,4 @@ function HomePage() { @@
         )
     }
-    export default HomePage
+    export default HomePage