Added Basic Darkmode and Fixed Small Bugs

app/(platform)/(dashboard)/board/[boardId]/_components/board-navbar.tsx

@@ -9,7 +9,7 @@ interface BoardNavbarProps {
 
 export const BoardNavbar = ({ data }: BoardNavbarProps) => {
   return (
-    <div className='fixed top-14 z-[40] flex h-14 w-full items-center gap-x-4 bg-black/50 px-6 text-white'>
+    <div className='fixed top-14 z-[40] flex h-14 w-full items-center gap-x-4 bg-black/50 px-6 text-white dark:text-neutral-200'>
       <BoardTitleForm data={data} />
       <div className='ml-auto'>
         <BoardOptions id={data.id} />

app/(platform)/(dashboard)/board/[boardId]/_components/board-options.tsx

@@ -54,12 +54,12 @@ export const BoardOptions = ({ id }: BoardOptionsProps) => {
         </Button>
       </PopoverTrigger>
       <PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
-        <div className='pb-4 text-center text-sm font-medium text-neutral-600'>
+        <div className='pb-4 text-center text-sm font-medium text-neutral-600 dark:text-neutral-200'>
           Board Actions
         </div>
         <PopoverClose asChild>
           <Button
-            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
+            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600 dark:text-neutral-200'
             variant='ghost'
           >
             <X className='h-4 w-4' />
@@ -69,7 +69,7 @@ export const BoardOptions = ({ id }: BoardOptionsProps) => {
           variant='ghost'
           onClick={onCopy}
           disabled={isLoadingCopy}
-          className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-neutral-600'
+          className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-neutral-600 dark:text-neutral-200'
         >
           Copy this Board
         </Button>
@@ -78,7 +78,7 @@ export const BoardOptions = ({ id }: BoardOptionsProps) => {
           variant='ghost'
           onClick={onDelete}
           disabled={isLoadingDelete}
-          className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
+          className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive dark:text-red-500 dark:hover:text-red-500'
         >
           Delete this Board
         </Button>

app/(platform)/(dashboard)/board/[boardId]/_components/board-update-image.tsx

@@ -43,7 +43,7 @@ export const BoardUpdateImage = ({ boardId }: BoardUpdateImageProps) => {
       <PopoverTrigger asChild>
         <Button
           variant='ghost'
-          className='h-auto w-full justify-start p-2 px-5 text-sm font-normal text-neutral-600'
+          className='h-auto w-full justify-start p-2 px-5 text-sm font-normal text-neutral-600 dark:text-neutral-200'
         >
           Change Background Image
         </Button>
@@ -51,7 +51,7 @@ export const BoardUpdateImage = ({ boardId }: BoardUpdateImageProps) => {
       <PopoverContent className='w-80 pt-3' side='left' align='start'>
         <PopoverClose asChild>
           <Button
-            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
+            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600 dark:text-neutral-200'
             variant='ghost'
           >
             <X className='h-4 w-4' />
@@ -59,10 +59,10 @@ export const BoardUpdateImage = ({ boardId }: BoardUpdateImageProps) => {
         </PopoverClose>
         <form action={onSubmit} className='space-y-4'>
           <div className='space-y-4'>
-            <p className='text-center text-xs font-medium italic text-neutral-700'>
+            <p className='text-center text-xs font-medium italic text-neutral-700 dark:text-neutral-100'>
               Images Provided by{' '}
               <Link
-                className='text-sky-900 underline'
+                className='text-sky-900 underline dark:text-sky-600'
                 href='https://unsplash.com/'
               >
                 Unsplash

app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx

@@ -24,17 +24,17 @@ export const CardItem = ({ index, data }: CardItemProps) => {
           ref={provided.innerRef}
           role='button'
           onClick={() => cardModal.onOpen(data.id)}
-          className='space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm hover:border-black'
+          className='space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm hover:border-black dark:bg-black dark:hover:border-white/50'
         >
           {data.title}
           {data?.dueDate && (
-            <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm'>
+            <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm dark:bg-slate-800'>
               <Calendar className='ml-0.5 mr-0.5 h-4 w-4' />
               Due: {format(data.dueDate, 'PP')}
             </div>
           )}
           {data?.startedAt && (
-            <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm'>
+            <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm dark:bg-slate-800'>
               <Calendar className='ml-0.5 mr-0.5 h-4 w-4' />
               Started: {format(data.startedAt, 'PP')}
             </div>

app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx

@@ -67,7 +67,7 @@ export const ListForm = () => {
         <form
           action={onSubmit}
           ref={formRef}
-          className='w-full space-y-4 rounded-md bg-white p-3 shadow-md'
+          className='w-full space-y-4 rounded-md bg-white p-3 shadow-md dark:bg-black'
         >
           <FormInput
             ref={inputRef}
@@ -92,7 +92,7 @@ export const ListForm = () => {
     <ListWrapper>
       <button
         onClick={enableEditing}
-        className='flex w-full items-center rounded-md bg-white/80 p-3 text-sm font-medium transition hover:bg-white/50'
+        className='flex w-full items-center rounded-md bg-white/80 p-3 text-sm font-medium transition hover:bg-white/50 dark:bg-white/10 dark:hover:bg-white/5'
       >
         <Plus className='mr-2 h-4 w-4' />
         Add a list

app/(platform)/(dashboard)/board/[boardId]/_components/list-item.tsx

@@ -41,7 +41,7 @@ export const ListItem = ({ index, data }: ListItemProps) => {
         >
           <div
             {...provided.dragHandleProps}
-            className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md'
+            className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md dark:bg-[#1f1f1f]'
           >
             <ListHeader onAddCard={enableEditing} data={data} />
             <Droppable droppableId={data.id} type='card'>

app/(platform)/(dashboard)/board/[boardId]/layout.tsx

@@ -1,14 +1,8 @@
 import { auth } from '@clerk/nextjs/server';
 import { notFound, redirect } from 'next/navigation';
-import {
-  LiveblocksProvider,
-  RoomProvider,
-  ClientSideSuspense,
-} from '@liveblocks/react/suspense';
 
 import { db } from '@/lib/db';
 import { BoardNavbar } from './_components/board-navbar';
-import { Skeleton } from '@/components/ui/skeleton';
 import { BoardLiveblocks } from './_components/board-liveblocks';
 
 export async function generateMetadata(props: {