Added Basic Darkmode and Fixed Small Bugs

app/(main)/_components/footer.tsx

@@ -3,7 +3,7 @@ import { Button } from '@/components/ui/button';
 
 export const Footer = () => {
   return (
-    <div className='fixed bottom-0 w-full border-t bg-slate-100 p-4'>
+    <div className='fixed bottom-0 w-full border-t bg-slate-100 p-4 dark:bg-slate-800'>
       <div className='mx-auto flex w-full items-center justify-between md:max-w-screen-2xl'>
         <Logo />
         <div className='flex w-full items-center justify-between space-x-4 md:block md:w-auto'>

app/(main)/_components/navbar.tsx

@@ -3,6 +3,7 @@ import { auth } from '@clerk/nextjs/server';
 
 import { Logo } from '@/components/logo';
 import { Button } from '@/components/ui/button';
+import { ModeToggle } from '@/components/ui/mode-toggle';
 
 export const Navbar = async () => {
   const { userId } = await auth();
@@ -10,7 +11,7 @@ export const Navbar = async () => {
   let isSignedIn = !!userId;
 
   return (
-    <div className='fixed top-0 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'>
       <div className='mx-auto flex w-full items-center justify-between md:max-w-screen-2xl'>
         <Logo />
         <div className='ml-0 flex w-full flex-auto items-center space-x-1 md:ml-6 md:block md:w-auto md:space-x-4'>
@@ -30,16 +31,18 @@ export const Navbar = async () => {
               <Button size='sm' asChild>
                 <Link href='/sign-up'>Get Tasko for Free</Link>
               </Button>
+              <ModeToggle />
             </div>
           ) : (
-            <div>
+            <div className='flex w-full justify-between space-x-4 md:block md:w-auto'>
               <Button size='sm' variant='outline' asChild>
                 <Link href='/select-org'>Dashboard</Link>
               </Button>
+              <ModeToggle />
             </div>
           )}
         </div>
       </div>
-    </div>
+    </nav>
   );
 };

app/(main)/blog/page.tsx

@@ -5,7 +5,9 @@ import Link from 'next/link';
 const BlogPage = () => {
   return (
     <div className='ml-4 mr-4 flex flex-col items-center space-y-10'>
-      <h1 className='text-4xl font-semibold text-neutral-700'>Blog</h1>
+      <h1 className='text-4xl font-semibold text-neutral-800 dark:text-neutral-100'>
+        Blog
+      </h1>
       <div className='grid grid-cols-2 gap-20 md:grid-cols-3 lg:grid-cols-4'>
         {allBlogPosts.map((post) => (
           <div className='space-y-4 text-center' key={post._meta.path}>
@@ -17,10 +19,12 @@ const BlogPage = () => {
                 alt='post cover image'
                 className='aspect-video w-full rounded-md object-cover'
               />
-              <h2 className='text-lg font-semibold text-neutral-700'>
+              <h2 className='text-lg font-semibold text-neutral-800 dark:text-neutral-100'>
                 {post.title}
               </h2>
-              <p className='text-sm text-neutral-500'>{post.summary}</p>
+              <p className='text-sm text-neutral-700 dark:text-neutral-200'>
+                {post.summary}
+              </p>
             </Link>
           </div>
         ))}

app/(main)/layout.tsx

@@ -3,9 +3,11 @@ import { Navbar } from './_components/navbar';
 
 const MarketingLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className='h-full bg-slate-100'>
+    <div className='h-full bg-slate-100 dark:bg-slate-800'>
       <Navbar />
-      <main className='bg-slate-100 pb-20 pt-20'>{children}</main>
+      <main className='bg-slate-100 pb-20 pt-20 dark:bg-slate-800'>
+        {children}
+      </main>
       <Footer />
     </div>
   );

app/(main)/page.tsx

@@ -26,7 +26,7 @@ const MarketingPage = () => {
           <Medal className='mr-2 h-6 w-6' />
           No 1 task management app
         </div>
-        <h1 className='mb-6 text-center text-neutral-800 ~/md:~text-3xl/6xl'>
+        <h1 className='mb-6 text-center text-neutral-800 ~/md:~text-3xl/6xl dark:text-neutral-100'>
           Tasko helps teams move
         </h1>
         <div className='w-fit rounded-md bg-gradient-to-r from-fuchsia-600 to-pink-600 p-2 px-4 pb-4 text-white ~/md:~text-3xl/6xl'>