Added Basic Darkmode and Fixed Small Bugs

app/(platform)/(dashboard)/_components/Navbar.tsx

@@ -6,10 +6,11 @@ import { Button } from '@/components/ui/button';
 import { FormPopover } from '@/components/form/form-popover';
 
 import { MobileSidebar } from './mobile-sidebar';
+import { ModeToggle } from '@/components/ui/mode-toggle';
 
 export const Navbar = () => {
   return (
-    <nav className='fixed top-0 z-50 flex h-14 w-full items-center border-b bg-white px-4 shadow-sm'>
+    <nav className='fixed top-0 z-50 flex h-14 w-full items-center border-b bg-white px-4 shadow-sm dark:bg-black'>
       <MobileSidebar />
       <div className='flex items-center gap-x-4'>
         <div className='hidden md:flex'>
@@ -60,6 +61,7 @@ export const Navbar = () => {
             },
           }}
         />
+        <ModeToggle />
       </div>
     </nav>
   );

app/(platform)/(dashboard)/_components/nav-item.tsx

@@ -68,8 +68,10 @@ export const NavItem = ({
       <AccordionTrigger
         onClick={() => onExpand(organization.id)}
         className={cn(
-          'flex items-center gap-x-2 rounded-md p-1.5 text-start text-neutral-700 no-underline transition hover:bg-neutral-500/10 hover:no-underline',
-          isActive && !isExpanded && 'bg-sky-500/10 text-sky-700'
+          'flex items-center gap-x-2 rounded-md p-1.5 text-start text-neutral-700 no-underline transition hover:bg-neutral-500/10 hover:no-underline dark:text-neutral-200 dark:hover:bg-neutral-200/10',
+          isActive &&
+            !isExpanded &&
+            'bg-sky-500/10 text-sky-700 dark:bg-sky-300/10 dark:text-sky-600'
         )}
       >
         <div className='flex items-center gap-x-2'>
@@ -84,7 +86,7 @@ export const NavItem = ({
           <span className='text-sm font-medium'>{organization.name}</span>
         </div>
       </AccordionTrigger>
-      <AccordionContent className='pt-1 text-neutral-700'>
+      <AccordionContent className='pt-1 text-neutral-700 dark:text-neutral-200'>
         {routes.map((route) => (
           <Button
             key={route.href}
@@ -92,7 +94,8 @@ export const NavItem = ({
             onClick={() => onClick(route.href)}
             className={cn(
               'mb-1 w-full justify-start pl-10 font-normal',
-              pathname === route.href && 'bg-sky-500/10 text-sky-700'
+              pathname === route.href &&
+                'bg-sky-500/10 text-sky-700 dark:bg-sky-300/10 dark:text-sky-600'
             )}
             variant='ghost'
           >

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: {

app/(platform)/(dashboard)/organization/[organizationId]/_components/board-list.tsx

@@ -32,7 +32,7 @@ export const BoardList = async () => {
 
   return (
     <div className='space-y-4'>
-      <div className='flex items-center text-lg font-semibold text-neutral-700'>
+      <div className='flex items-center text-lg font-semibold text-neutral-700 dark:text-neutral-200'>
         <User2 className='mr-2 h-6 w-6' />
         Your boards
       </div>

app/(platform)/(dashboard)/organization/[organizationId]/activity/page.tsx

@@ -64,14 +64,14 @@ const ActivityPage = async ({
 
 export default ActivityPage;
 
-const ActivityListSkeleton = () => {
+function ActivityListSkeleton() {
   return (
-    <ol className='mt-4 space-y-4'>
+    <div className='mt-4 space-y-4'>
       <Skeleton className='h-14 w-[80%]' />
       <Skeleton className='h-14 w-[50%]' />
       <Skeleton className='h-14 w-[70%]' />
       <Skeleton className='h-14 w-[80%]' />
       <Skeleton className='h-14 w-[75%]' />
-    </ol>
+    </div>
   );
-};
+}

app/(platform)/layout.tsx

@@ -1,14 +1,25 @@
+'use client';
+
 import { Toaster } from 'sonner';
 import { ClerkProvider } from '@clerk/nextjs';
+import { dark } from '@clerk/themes';
+import { useTheme } from 'next-themes';
 
 import { ModalProvider } from '@/components/providers/modal-provider';
 import { QueryProvider } from '@/components/providers/query-provider';
 
 const PlatformLayout = ({ children }: { children: React.ReactNode }) => {
+  const { theme } = useTheme();
+
   return (
-    <ClerkProvider afterSignOutUrl='/'>
+    <ClerkProvider
+      afterSignOutUrl='/'
+      appearance={{
+        baseTheme: theme === 'dark' ? dark : undefined,
+      }}
+    >
       <QueryProvider>
-        <Toaster />
+        <Toaster theme='system' />
         <ModalProvider />
         {children}
       </QueryProvider>