From 0dea9c5d3c24ef312ee3c8218b7de85cc5e16cc3 Mon Sep 17 00:00:00 2001
From: Nikhil Sarwara <tymnec@gmail.com>
Date: Sat, 14 Oct 2023 15:38:29 +0530
Subject: [PATCH 1/6] Added: Dark Toggle Button

---
 app/breadcrumb.tsx              | 126 ++++++++++++++++++--------------
 app/layout.tsx                  |   4 +-
 app/page.tsx                    |   4 +-
 components/dark-mode-toggle.tsx |  26 +++++++
 tailwind.config.js              |   1 +
 5 files changed, 101 insertions(+), 60 deletions(-)
 create mode 100644 components/dark-mode-toggle.tsx

diff --git a/app/breadcrumb.tsx b/app/breadcrumb.tsx
index b39eef3..28d351e 100644
--- a/app/breadcrumb.tsx
+++ b/app/breadcrumb.tsx
@@ -1,56 +1,57 @@
-'use client';
+"use client";
 
-import clsx from 'clsx';
-import { signIn, signOut, useSession } from 'next-auth/react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useSelectedLayoutSegments } from 'next/navigation';
-import { Fragment, useState } from 'react';
-import { BiBell } from 'react-icons/bi';
-import { BsLink45Deg, BsPersonFill } from 'react-icons/bs';
-import { TbLogout } from 'react-icons/tb';
+import clsx from "clsx";
+import { signIn, signOut, useSession } from "next-auth/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useSelectedLayoutSegments } from "next/navigation";
+import { Fragment, useState } from "react";
+import { BiBell } from "react-icons/bi";
+import { BsLink45Deg, BsPersonFill } from "react-icons/bs";
+import { TbLogout } from "react-icons/tb";
 
-import ImageWithFallback from '@/components/fallback-image';
+import ImageWithFallback from "@/components/fallback-image";
+import DarkModeToggle from "@/components/dark-mode-toggle";
 
 const capitalise = (text: string) => {
   return text
-    .split(' ')
+    .split(" ")
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
+    .join(" ");
 };
 
 const quickList = [
   {
-    heading: 'Calendars',
+    heading: "Calendars",
     items: [
-      { name: 'Academic Calendar', link: '1iJ6BxMBIqZEfFMe9c4ocidcm_madI13U' },
-      { name: 'Holidays', link: '1l5no5NR7uguRm7zXbpeIqbN9X9IiyDun' },
+      { name: "Academic Calendar", link: "1iJ6BxMBIqZEfFMe9c4ocidcm_madI13U" },
+      { name: "Holidays", link: "1l5no5NR7uguRm7zXbpeIqbN9X9IiyDun" },
     ],
   },
   {
-    heading: 'Syllabi',
+    heading: "Syllabi",
     items: [
-      { name: 'Civil Engineering', link: '16GZfj3pzUaiKMx-frey_K2dB2Oy6xe0d' },
-      { name: 'Computer Science', link: '1sgjxNv4gf662kwbNeAGygPD49NvGQ2gL' },
+      { name: "Civil Engineering", link: "16GZfj3pzUaiKMx-frey_K2dB2Oy6xe0d" },
+      { name: "Computer Science", link: "1sgjxNv4gf662kwbNeAGygPD49NvGQ2gL" },
       {
-        name: 'Electronics And Communication Engineering',
-        link: '1IUDACGOHCO3h-vhx-G8ofwrD3LUfqTP-',
+        name: "Electronics And Communication Engineering",
+        link: "1IUDACGOHCO3h-vhx-G8ofwrD3LUfqTP-",
       },
       {
-        name: 'Electrical Engineering',
-        link: '1m-xhRr2J-kK-5EUBeRj7M33ipndCfT_t',
+        name: "Electrical Engineering",
+        link: "1m-xhRr2J-kK-5EUBeRj7M33ipndCfT_t",
       },
       {
-        name: 'Information Technology',
-        link: '1hF5sqQb6ifLHcZrc2immFpSn6IoF35OD',
+        name: "Information Technology",
+        link: "1hF5sqQb6ifLHcZrc2immFpSn6IoF35OD",
       },
       {
-        name: 'Mechanical Engineering',
-        link: '1vvgCKCY8hTbHd4oFT51MRXdyYuT2lSLI',
+        name: "Mechanical Engineering",
+        link: "1vvgCKCY8hTbHd4oFT51MRXdyYuT2lSLI",
       },
       {
-        name: 'Production and Industrial Engineering',
-        link: '1l--XXOVAGTyhZYGxz_-G6RJT_Bq-FKY9',
+        name: "Production and Industrial Engineering",
+        link: "1l--XXOVAGTyhZYGxz_-G6RJT_Bq-FKY9",
       },
     ],
   },
@@ -58,7 +59,7 @@ const quickList = [
 
 export default function Breadcrumb() {
   const segments = useSelectedLayoutSegments()
-    .filter((segment) => !(segment.startsWith('(') && segment.endsWith(')')))
+    .filter((segment) => !(segment.startsWith("(") && segment.endsWith(")")))
     .map((segment) => decodeURIComponent(segment));
 
   const [showQuickList, setShowQuickList] = useState(false);
@@ -68,7 +69,7 @@ export default function Breadcrumb() {
   return (
     <nav
       aria-label="Breadcrumb"
-      className={clsx('mb-4 md:mb-8', 'bg-palette-700 py-2')}
+      className={clsx("mb-4 md:mb-8", "bg-palette-700 py-2")}
     >
       <section className="container flex flex-wrap justify-between max-w-screen-lg md:text-[22px]">
         <ol className="gap-2 inline-flex items-center justify-start">
@@ -76,10 +77,10 @@ export default function Breadcrumb() {
             <Link href="/">
               <Image
                 className={clsx(
-                  'h-7 w-7',
-                  'sm:h-8 sm:w-8',
-                  'md:h-9 md:w-9',
-                  'rounded-full ring ring-palette-700 hover:ring-palette-200'
+                  "h-7 w-7",
+                  "sm:h-8 sm:w-8",
+                  "md:h-9 md:w-9",
+                  "rounded-full ring ring-palette-700 hover:ring-palette-200"
                 )}
                 height={34}
                 width={34}
@@ -94,11 +95,11 @@ export default function Breadcrumb() {
               <span>➜</span>
               <li
                 className={clsx(
-                  'sm:p-1 md:p-2',
-                  index === segments.length - 1 && 'font-bold'
+                  "sm:p-1 md:p-2",
+                  index === segments.length - 1 && "font-bold"
                 )}
               >
-                <Link href={'/' + segments.slice(0, index + 1).join('/')}>
+                <Link href={"/" + segments.slice(0, index + 1).join("/")}>
                   <h3 className="mb-0">{capitalise(segment)}</h3>
                 </Link>
               </li>
@@ -108,10 +109,23 @@ export default function Breadcrumb() {
 
         <ol
           className={clsx(
-            'sm:gap-1 md:gap-2',
-            'inline-flex items-center justify-end'
+            "sm:gap-1 md:gap-2",
+            "inline-flex items-center justify-end"
           )}
         >
+          <li className="p-1 relative">
+            <ol
+              className={clsx(
+                "sm:gap-1 md:gap-2",
+                "inline-flex items-center justify-end mt-2"
+              )}
+            >
+              <li>
+                <DarkModeToggle />
+              </li>
+            </ol>
+          </li>
+
           <li
             className="p-1 relative"
             onMouseEnter={() => {
@@ -122,7 +136,7 @@ export default function Breadcrumb() {
             }}
           >
             <BsLink45Deg
-              className={clsx('h-5 w-5', 'sm:h-6 sm:w-6', 'md:h-7 md:w-7')}
+              className={clsx("h-5 w-5", "sm:h-6 sm:w-6", "md:h-7 md:w-7")}
             />
             {showQuickList && (
               <nav className="absolute right-0 bg-palette-500 min-w-max mt-1 rounded-md shadow-lg">
@@ -170,25 +184,25 @@ export default function Breadcrumb() {
           </li> */}
 
           <li className="p-1">
-            {session && segments[0] == 'profile' ? (
+            {session && segments[0] == "profile" ? (
               <TbLogout
                 className={clsx(
-                  'hover:cursor-pointer',
-                  'h-5 w-5',
-                  'sm:h-6 sm:w-6',
-                  'md:h-7 md:w-7'
+                  "hover:cursor-pointer",
+                  "h-5 w-5",
+                  "sm:h-6 sm:w-6",
+                  "md:h-7 md:w-7"
                 )}
-                onClick={() => signOut({ callbackUrl: '/' })}
+                onClick={() => signOut({ callbackUrl: "/" })}
                 title="Sign Out"
               />
             ) : session ? (
               <Link href="/profile" title="Open Profile">
                 <ImageWithFallback
                   className={clsx(
-                    'rounded-full',
-                    'h-5 w-5',
-                    'sm:h-6 sm:w-6',
-                    'md:h-7 md:w-7'
+                    "rounded-full",
+                    "h-5 w-5",
+                    "sm:h-6 sm:w-6",
+                    "md:h-7 md:w-7"
                   )}
                   src={session.user?.image}
                   height={32}
@@ -199,12 +213,12 @@ export default function Breadcrumb() {
             ) : (
               <BsPersonFill
                 className={clsx(
-                  'hover:cursor-pointer',
-                  'h-5 w-5',
-                  'sm:h-6 sm:w-6',
-                  'md:h-7 md:w-7'
+                  "hover:cursor-pointer",
+                  "h-5 w-5",
+                  "sm:h-6 sm:w-6",
+                  "md:h-7 md:w-7"
                 )}
-                onClick={() => signIn('google', { callbackUrl: '/profile' })}
+                onClick={() => signIn("google", { callbackUrl: "/profile" })}
                 title="Sign in using Google"
               />
             )}
diff --git a/app/layout.tsx b/app/layout.tsx
index 845daa4..d10a77e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
   return (
     <html>
       <head />
-      <body className="flex flex-col">
+      <body className="flex flex-col bg-palette-200 dark:bg-palette-900">
         <noscript>You need to enable JavaScript to run this app</noscript>
 
         <AuthProvider>
@@ -24,7 +24,7 @@ export default function RootLayout({
           </section>
         </AuthProvider>
 
-        <footer className="bg-palette-800 py-4 mt-8">
+        <footer className="bg-palette-700 dark:bg-palette-800 py-4 mt-8">
           <section className="align-middle container flex flex-row flex-wrap justify-between max-w-screen-lg">
             <ul className="gap-4 inline-flex flex-wrap">
               <li>
diff --git a/app/page.tsx b/app/page.tsx
index b9637d3..fc4b2e4 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -41,11 +41,11 @@ export default function HomePage() {
   return (
     <article className="my-auto">
       <hgroup className="mb-12">
-        <h1 className="mb-6">
+        <h1 className="mb-6 text-palette-800 dark:text-palette-100">
           <Balancer>NIT-KKR Student Support</Balancer>
         </h1>
 
-        <p>
+        <p className='text-palette-600 dark:text-palette-200'>
           Welcome! This project aims to enable an easier path to figuring your
           way in this college! We have many more features planned that you can
           find out about on our Discord server linked below.
diff --git a/components/dark-mode-toggle.tsx b/components/dark-mode-toggle.tsx
new file mode 100644
index 0000000..b0c479b
--- /dev/null
+++ b/components/dark-mode-toggle.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import React, { useState } from "react";
+
+const DarkModeToggle = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const handleClick = () => {
+    setIsDarkMode(!isDarkMode);
+    document.documentElement.classList.toggle("dark");
+  };
+
+  return (
+    <label className="relative inline-flex items-center cursor-pointer">
+      <input
+        type="checkbox"
+        value=""
+        className="sr-only peer"
+        onChange={handleClick}
+      />
+      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+    </label>
+  );
+};
+
+export default DarkModeToggle;
diff --git a/tailwind.config.js b/tailwind.config.js
index efe92e7..a8ddbd4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
     container: {
       center: true,

From 3731a50a1f2ec3eae3b66dee6c54bc601fc976d4 Mon Sep 17 00:00:00 2001
From: Nikhil Sarwara <tymnec@gmail.com>
Date: Sat, 14 Oct 2023 15:44:10 +0530
Subject: [PATCH 2/6] Added: Shadow Effect in Cards

---
 app/page.tsx                     | 6 +++---
 components/home-cards-layout.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index fc4b2e4..4b6ecca 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -59,7 +59,7 @@ export default function HomePage() {
       <nav className="h-min">
         <ol className="grid grid-cols-1 sm:grid-cols-6 grid-auto-rows gap-8">
           <li
-            className={clsx('col-start-1 row-start-1 w-fit', 'sm:col-span-2')}
+            className={clsx('col-start-1 row-start-1 w-fit hover:shadow-lg shadow p-4 rounded-3xl', 'sm:col-span-2')}
           >
             <HomeCardsLayout
               href="/announcements"
@@ -72,7 +72,7 @@ export default function HomePage() {
 
           <li
             className={clsx(
-              'col-start-1 row-start-2 w-fit',
+              'col-start-1 row-start-2 w-fit hover:shadow-lg shadow p-4 rounded-3xl',
               'sm:col-span-2 sm:col-start-5 sm:row-start-1 sm:justify-self-end',
               'md:col-start-3 md:row-start-1 md:justify-self-center'
             )}
@@ -88,7 +88,7 @@ export default function HomePage() {
 
           <li
             className={clsx(
-              'col-start-1 row-start-3 w-fit',
+              'col-start-1 row-start-3 w-fit hover:shadow-lg shadow p-4 rounded-3xl',
               'sm:col-span-2 sm:col-start-3 sm:row-start-2 sm:justify-self-center',
               'md:col-start-5 md:row-start-1 md:justify-self-end'
             )}
diff --git a/components/home-cards-layout.tsx b/components/home-cards-layout.tsx
index a26d501..5c4671c 100644
--- a/components/home-cards-layout.tsx
+++ b/components/home-cards-layout.tsx
@@ -38,7 +38,7 @@ export default function HomeCardsLayout({
           >
             <Balancer className="min-w-fit">{title}</Balancer>
           </h3>
-          <p className="max-w-fit">
+          <p className="max-w-fit text-palette-800 dark:text-palette-300">
             <small className="min-w-fit">{description}</small>
           </p>
         </hgroup>

From 5998a6c91373e68d9a022caf636824c4897b015c Mon Sep 17 00:00:00 2001
From: Nikhil Sarwara <tymnec@gmail.com>
Date: Sat, 14 Oct 2023 15:49:51 +0530
Subject: [PATCH 3/6] Changed: Figure Background In Light Mode

---
 app/breadcrumb.tsx               | 2 +-
 components/home-cards-layout.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/breadcrumb.tsx b/app/breadcrumb.tsx
index 28d351e..68fdebf 100644
--- a/app/breadcrumb.tsx
+++ b/app/breadcrumb.tsx
@@ -69,7 +69,7 @@ export default function Breadcrumb() {
   return (
     <nav
       aria-label="Breadcrumb"
-      className={clsx("mb-4 md:mb-8", "bg-palette-700 py-2")}
+      className={clsx("mb-4 md:mb-8", "bg-palette-500 dark:bg-palette-700 py-2")}
     >
       <section className="container flex flex-wrap justify-between max-w-screen-lg md:text-[22px]">
         <ol className="gap-2 inline-flex items-center justify-start">
diff --git a/components/home-cards-layout.tsx b/components/home-cards-layout.tsx
index 5c4671c..aabb2c0 100644
--- a/components/home-cards-layout.tsx
+++ b/components/home-cards-layout.tsx
@@ -26,7 +26,7 @@ export default function HomeCardsLayout({
           className={clsx(
             'h-12 w-12 p-3',
             'md:h-16 md:w-16 md:p-4',
-            'bg-palette-400 rounded-full'
+            'bg-palette-800 dark:bg-palette-400 rounded-full'
           )}
         >
           {children}

From 2a13e0e5c3f9060b3dd5f67598fd44f509b9c04c Mon Sep 17 00:00:00 2001
From: Nikhil Sarwara <tymnec@gmail.com>
Date: Sat, 14 Oct 2023 15:57:41 +0530
Subject: [PATCH 4/6] Added: Dark Mode Effect in Announcements

---
 app/announcements/page.tsx    | 10 +++++-----
 components/default-layout.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/announcements/page.tsx b/app/announcements/page.tsx
index 4c27fd1..094ba93 100644
--- a/app/announcements/page.tsx
+++ b/app/announcements/page.tsx
@@ -31,21 +31,21 @@ export default async function AnnouncementsPage() {
     <ul>
       {Array.from(groupedAnnouncements).map(
         ([dateKey, announcementForDate], index) => (
-          <li className="mb-6" key={index}>
+          <li className="mb-6 text-palette-900 dark:text-palette-100" key={index}>
             <h4>
               {dateKey.slice(0, 2)}
               <sup>{dateKey.slice(2, 4)}</sup>
               {dateKey.slice(4)}
             </h4>
 
-            <ul className="text-palette-300 ml-4 sm:ml-6 md:ml-8">
+            <ul className="text-palette-800 dark:text-palette-300 ml-4 sm:ml-6 md:ml-8">
               {announcementForDate.map((announcement, innerIndex) => (
                 <li className="list-disc mt-2" key={`${index}-${innerIndex}`}>
                   {announcement.subtitle ? (
                     <ul>
                       <li>
                         <a
-                          className="hover:text-palette-100"
+                          className="hover:text-palette-400 dark:hover:text-palette-100"
                           href={announcement.title_link}
                           target="_blank"
                         >
@@ -54,7 +54,7 @@ export default async function AnnouncementsPage() {
                       </li>
                       <li>
                         <a
-                          className="hover:text-palette-100"
+                          className="hover:text-palette-400 dark:hover:text-palette-100"
                           href={announcement.subtitle_link}
                           target="_blank"
                         >
@@ -64,7 +64,7 @@ export default async function AnnouncementsPage() {
                     </ul>
                   ) : (
                     <a
-                      className="hover:text-palette-100"
+                      className="hover:text-palette-400 dark:hover:text-palette-100"
                       href={announcement.title_link}
                       target="_blank"
                     >
diff --git a/components/default-layout.tsx b/components/default-layout.tsx
index 19fe15f..9f0fb43 100644
--- a/components/default-layout.tsx
+++ b/components/default-layout.tsx
@@ -15,7 +15,7 @@ export default function DefaultLayout({
 }) {
   return (
     <>
-      <hgroup className="mb-2 sm:mb-4 md:mb-6">
+      <hgroup className="mb-2 sm:mb-4 md:mb-6 text-palette-700 dark:text-palette-100">
         <h1>
           <Balancer>{title}</Balancer>
         </h1>

From 340355b0ba86d5e28e9b8167a645ac9be731ae37 Mon Sep 17 00:00:00 2001
From: Nikhil Sarwara <tymnec@gmail.com>
Date: Sat, 14 Oct 2023 16:04:17 +0530
Subject: [PATCH 5/6] Added: Dark Mode Effect in Courses Section

---
 app/courses/(non-code)/page.tsx | 10 +++++-----
 components/chip.tsx             |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/courses/(non-code)/page.tsx b/app/courses/(non-code)/page.tsx
index 28de57e..61ff374 100644
--- a/app/courses/(non-code)/page.tsx
+++ b/app/courses/(non-code)/page.tsx
@@ -59,7 +59,7 @@ export default function CoursesPage() {
     <>
       <table className="w-full">
         <tbody>
-          <tr className="flex flex-row justify-between gap-4">
+          <tr className="flex flex-row justify-between gap-4 text-palette-800 dark:text-palette-100">
             <td className="border-none px-0">
               <fieldset className="p-2 sm:p-3 md:p-4 border-2 rounded border-palette-400">
                 <legend className="px-2">Choose your branch</legend>
@@ -124,15 +124,15 @@ export default function CoursesPage() {
 
       {!isLoading && !(branch && semester) && filteredCourses.length > 0 ? (
         <>
-          {branch || semester ? <></> : <h2>All courses</h2>}
-          {branch ? <h2>All courses in the {branch} branch</h2> : <></>}
-          {semester ? <h2>All courses in semester {semester}</h2> : <></>}
+          {branch || semester ? <></> : <h2 className='text-palette-800 dark:text-palette-100'>All courses</h2>}
+          {branch ? <h2 className='text-palette-800 dark:text-palette-100'>All courses in the {branch} branch</h2> : <></>}
+          {semester ? <h2 className='text-palette-800 dark:text-palette-100'>All courses in semester {semester}</h2> : <></>}
 
           <ul>
             {filteredCourses.map((course) => {
               return (
                 <Link href={`/courses/${course.code}`} key={course.code}>
-                  <li className="list-disclosure-closed ml-4">
+                  <li className="list-disclosure-closed ml-4 text-palette-800 dark:text-palette-100">
                     <h4>
                       {course.code}:{' '}
                       <span className="font-normal">{course.title}</span>
diff --git a/components/chip.tsx b/components/chip.tsx
index d6ead62..35a7e74 100644
--- a/components/chip.tsx
+++ b/components/chip.tsx
@@ -20,7 +20,7 @@ export default function Chip({
         'md:h-8 md:px-3 md:text-sm',
         isSelected && 'bg-palette-500',
         'border items-center rounded-full',
-        'text-palette-200 hover:bg-palette-500'
+        'text-palette-800 dark:text-palette-200 hover:bg-palette-500 hover:text-palette-100'
       )}
       disabled={disabled}
       onClick={onClick}

From cf0338dc28bea0a57858a9dd5f031b895af5d00a Mon Sep 17 00:00:00 2001
From: Nikhil Sarwara <tymnec@gmail.com>
Date: Sat, 14 Oct 2023 16:13:04 +0530
Subject: [PATCH 6/6] Clubs - Text Palette Support For Light Mode

---
 app/clubs/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/clubs/page.tsx b/app/clubs/page.tsx
index cdeefaf..d159319 100644
--- a/app/clubs/page.tsx
+++ b/app/clubs/page.tsx
@@ -26,7 +26,7 @@ const getCategorisedClubs = (
   const filteredClubs = clubs.filter((club) => club.category === category);
 
   if (filteredClubs.length === 0)
-    return <p>No club found for the {category} category</p>;
+    return <p className='text-red-400'>No club found for the {category} category</p>;
 
   return filteredClubs.map((club, index) => (
     <li key={index}>
@@ -63,7 +63,7 @@ export default async function ClubsPage() {
       {clubCategories.map((category: ClubCategory, categoryIndex) => {
         return (
           <Fragment key={categoryIndex}>
-            <h2>{category}</h2>
+            <h2 className='text-palette-700 dark:text-palette-100'>{category}</h2>
             <ol className="flex flex-row flex-wrap gap-2 sm:gap-4 mb-8">
               {getCategorisedClubs(category, clubs)}
             </ol>