feat: add theming

src/components/Navbar.tsx

@@ -1,24 +1,35 @@
 import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
 import Link from 'next/link';
+import ThemeButton from './ThemeButton';
 
 export default function Navbar() {
   return (
-    <nav className='flex items-center justify-between p-5 shadow-md'>
+    <nav className='flex items-center justify-between p-5 shadow-md dark:bg-secondary-gray'>
       <ul className='flex items-center gap-4'>
         <li>
-          <Link href='/'>
+          <Link
+            href='/'
+            className='italic'
+          >
             conve
-            <span className='font-bold italic text-4xl text-primary-accent'>
-              X
-            </span>
+            <span className='font-bold text-4xl text-primary-accent'>X</span>
           </Link>
         </li>
       </ul>
       <ul className='flex items-center gap-4'>
+        <li>
+          <ThemeButton />
+        </li>
         <SignedIn>
           <li>
             <UserButton
-              showName
+              appearance={{
+                elements: {
+                  card: 'dark:bg-secondary-gray [&_*]:dark:text-white',
+                  userButtonTrigger:
+                    'border-solid border-2 border-primary-accent focus:shadow-none',
+                },
+              }}
               userProfileMode='navigation'
               userProfileUrl='/account'
               signInUrl='/login'

src/components/ThemeButton.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import { BsMoonStarsFill, BsSunFill } from 'react-icons/bs';
+import { ImSpinner2 } from 'react-icons/im';
+
+export default function ThemeButton() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => setMounted(true), []);
+
+  const isDark = theme === 'dark';
+
+  return (
+    <button
+      className='flex items-center justify-center'
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+    >
+      {mounted === false ? (
+        <ImSpinner2 className='w-5 h-5 animate-spin' />
+      ) : isDark ? (
+        <BsMoonStarsFill className='w-5 h-5' />
+      ) : (
+        <BsSunFill className='w-5 h-5' />
+      )}
+    </button>
+  );
+}