adding dark mode to feat/refresh

apps/web/src/components/(dashboard)/layout/desktop-nav.tsx

@@ -16,17 +16,23 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
     <div className={cn('ml-8 hidden flex-1 gap-x-6 md:flex', className)} {...props}>
       <Link
         href="/dashboard"
-        className={cn('font-medium leading-5 text-[#A1A1AA] hover:opacity-80', {
-          'text-primary-foreground': pathname?.startsWith('/dashboard'),
-        })}
+        className={cn(
+          'text-muted-foreground focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+          {
+            'text-foreground': pathname?.startsWith('/dashboard'),
+          },
+        )}
       >
         Dashboard
       </Link>
       <Link
         href="/documents"
-        className={cn('font-medium leading-5 text-[#A1A1AA] hover:opacity-80', {
-          'text-primary-foreground': pathname?.startsWith('/documents'),
-        })}
+        className={cn(
+          'text-muted-foreground focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 ',
+          {
+            'text-foreground': pathname?.startsWith('/documents'),
+          },
+        )}
       >
         Documents
       </Link>

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -29,7 +29,10 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
       {...props}
     >
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
-        <Link href="/">
+        <Link
+          href="/"
+          className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+        >
           <Logo className="h-6 w-auto" />
         </Link>
 

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -2,8 +2,18 @@
 
 import Link from 'next/link';
 
-import { CreditCard, Github, Key, LogOut, User as LucideUser } from 'lucide-react';
+import {
+  CreditCard,
+  Github,
+  Key,
+  LogOut,
+  User as LucideUser,
+  Monitor,
+  Moon,
+  Sun,
+} from 'lucide-react';
 import { signOut } from 'next-auth/react';
+import { useTheme } from 'next-themes';
 
 import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 import { User } from '@documenso/prisma/client';
@@ -26,10 +36,12 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
   const initials =
     user.name
       ?.split(' ')
-      .map((name) => name.slice(0, 1).toUpperCase())
+      .map((name: string) => name.slice(0, 1).toUpperCase())
       .slice(0, 2)
       .join('') ?? 'UK';
 
+  const { theme, setTheme } = useTheme();
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -68,6 +80,28 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
 
         <DropdownMenuSeparator />
 
+        {theme === 'light' ? null : (
+          <DropdownMenuItem onClick={() => setTheme('light')}>
+            <Sun className="mr-2 h-4 w-4" />
+            Light Mode
+          </DropdownMenuItem>
+        )}
+        {theme === 'dark' ? null : (
+          <DropdownMenuItem onClick={() => setTheme('dark')}>
+            <Moon className="mr-2 h-4 w-4" />
+            Dark Mode
+          </DropdownMenuItem>
+        )}
+
+        {theme === 'system' ? null : (
+          <DropdownMenuItem onClick={() => setTheme('system')}>
+            <Monitor className="mr-2 h-4 w-4" />
+            System Theme
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuSeparator />
+
         <DropdownMenuItem asChild>
           <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
             <Github className="mr-2 h-4 w-4" />