dark mode!

packages/client/src/App.tsx

···
 
 function App() {
   return (
-    <div className="bg-gray-50 min-h-screen">
+    <div className="min-h-screen">
       <div className="max-w-4xl mx-auto p-4 w-full">
         <AuthProvider>
           <Routes>

packages/client/src/components/Header.tsx

···
   }
 
   return (
-    <header className="mb-8 border-b border-gray-200 pb-4">
+    <header className="mb-8 border-b border-gray-200 dark:border-gray-700 pb-4">
       <div className="flex justify-between items-center">
         <h1 className="m-0 text-2xl font-bold">
           <Link
             to="/"
-            className="no-underline text-inherit hover:text-blue-600 transition-colors"
+            className="no-underline text-inherit hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
           >
             Statusphere
           </Link>
···
         <nav>
           {user ? (
             <div className="flex gap-4 items-center">
-              <span className="text-gray-700">
+              <span className="text-gray-700 dark:text-gray-300">
                 {user.profile?.displayName ||
                   user.profile?.handle ||
                   user.did.substring(0, 15)}
               </span>
               <button
                 onClick={handleLogout}
-                className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md transition-colors"
+                className="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-colors"
               >
                 Logout
               </button>
             </div>
           ) : (
             <Link to="/login">
-              <button className="px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 rounded-md transition-colors">
+              <button className="px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 rounded-md transition-colors">
                 Login
               </button>
             </Link>

packages/client/src/components/StatusForm.tsx

···
   }
 
   return (
-    <div className="bg-white rounded-lg p-4 mb-6 shadow-sm">
+    <div className="bg-white dark:bg-gray-800 rounded-lg p-4 mb-6 shadow-sm">
       <h2 className="text-xl font-semibold mb-4">How are you feeling?</h2>
       {(error || mutation.error) && (
-        <div className="text-red-500 mb-4 p-2 bg-red-50 rounded-md">
+        <div className="text-red-500 mb-4 p-2 bg-red-50 dark:bg-red-950 dark:bg-opacity-30 rounded-md">
           {error ||
             (mutation.error instanceof Error
               ? mutation.error.message
···
                 flex items-center justify-center
                 transition-all duration-200
                 ${isSelected ? 'opacity-60' : 'opacity-100'}
-                ${!isSelected ? 'hover:bg-gray-100 hover:scale-110' : ''}
-                ${isCurrentStatus ? 'bg-blue-50 ring-1 ring-blue-200' : ''}
+                ${!isSelected ? 'hover:bg-gray-100 dark:hover:bg-gray-700 hover:scale-110' : ''}
+                ${isCurrentStatus 
+                  ? 'bg-blue-50 ring-1 ring-blue-200 dark:bg-blue-900 dark:bg-opacity-30 dark:ring-blue-700' 
+                  : ''}
                 active:scale-95
-                focus:outline-none focus:ring-2 focus:ring-blue-300
+                focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500
               `}
               title={isCurrentStatus ? 'Your current status' : undefined}
             >

packages/client/src/components/StatusList.tsx

···
 
   if (isLoading && !data) {
     return (
-      <div className="py-4 text-center text-gray-500">Loading statuses...</div>
+      <div className="py-4 text-center text-gray-500 dark:text-gray-400">Loading statuses...</div>
     )
   }
 
···
 
   if (statuses.length === 0) {
     return (
-      <div className="py-4 text-center text-gray-500">No statuses yet.</div>
+      <div className="py-4 text-center text-gray-500 dark:text-gray-400">No statuses yet.</div>
     )
   }
 
···
   return (
     <div className="px-4">
       <div className="relative">
-        <div className="absolute left-[20.5px] top-[22.5px] bottom-[22.5px] w-0.5 bg-gray-200"></div>
+        <div className="absolute left-[20.5px] top-[22.5px] bottom-[22.5px] w-0.5 bg-gray-200 dark:bg-gray-700"></div>
         {statuses.map((status) => {
           const handle =
             status.profile.handle || status.profile.did.substring(0, 15) + '...'
···
               key={status.uri}
               className="relative flex items-center gap-5 py-4"
             >
-              <div className="relative z-10 rounded-full bg-white border border-gray-200 h-[45px] w-[45px] flex items-center justify-center shadow-sm">
+              <div className="relative z-10 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 h-[45px] w-[45px] flex items-center justify-center shadow-sm">
                 <div className="text-2xl">{status.status}</div>
               </div>
               <div className="flex-1">
-                <div className="text-gray-600 text-base">
-                  <span className="font-medium text-gray-700 hover:underline">
+                <div className="text-gray-600 dark:text-gray-300 text-base">
+                  <span className="font-medium text-gray-700 dark:text-gray-200 hover:underline">
                     @{handle}
                   </span>{' '}
                   {isToday ? (

packages/client/src/index.css

···
 .status-message-fade {
   animation: fadeOut 2s forwards;
 }
+
+/* Base styling */
+@layer base {
+  body {
+    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100;
+  }
+}

packages/client/src/pages/HomePage.tsx

···
     return (
       <div className="flex justify-center items-center py-16">
         <div className="text-center p-6">
-          <h2 className="text-2xl font-semibold mb-2 text-gray-800">
+          <h2 className="text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">
             Loading Statusphere...
           </h2>
-          <p className="text-gray-600">Setting up your experience</p>
+          <p className="text-gray-600 dark:text-gray-400">Setting up your experience</p>
         </div>
       </div>
     )
···
     return (
       <div className="flex justify-center items-center py-16">
         <div className="text-center p-6 max-w-md">
-          <h2 className="text-2xl font-semibold mb-2 text-gray-800">Error</h2>
+          <h2 className="text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">Error</h2>
           <p className="text-red-500 mb-4">{error}</p>
           <a
             href="/login"
-            className="inline-block px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
+            className="inline-block px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors"
           >
             Try logging in again
           </a>
···
       {user && <StatusForm />}
 
       <div>
-        <h2 className="text-xl font-semibold mb-4 text-gray-800">
+        <h2 className="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">
           Recent Statuses
         </h2>
         <StatusList />

packages/client/src/pages/LoginPage.tsx

···
     <div className="flex flex-col gap-8">
       <Header />
 
-      <div className="bg-white rounded-lg p-6 shadow-sm max-w-md mx-auto w-full">
+      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm max-w-md mx-auto w-full">
         <h2 className="text-xl font-semibold mb-4">Login with your handle</h2>
 
         {error && (
-          <div className="text-red-500 mb-4 p-2 bg-red-50 rounded-md">
+          <div className="text-red-500 mb-4 p-2 bg-red-50 dark:bg-red-950 dark:bg-opacity-30 rounded-md">
             {error}
           </div>
         )}
 
         <form onSubmit={handleSubmit}>
           <div className="mb-4">
-            <label htmlFor="handle" className="block mb-2 text-gray-700">
+            <label htmlFor="handle" className="block mb-2 text-gray-700 dark:text-gray-300">
               Enter your Bluesky handle:
             </label>
             <input
···
               onChange={(e) => setHandle(e.target.value)}
               placeholder="example.bsky.social"
               disabled={loading}
-              className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300"
+              className="w-full p-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500"
             />
           </div>
 
           <button
             type="submit"
             disabled={loading}
-            className={`w-full px-4 py-2 rounded-md bg-blue-500 text-white font-medium hover:bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 ${
+            className={`w-full px-4 py-2 rounded-md bg-blue-500 dark:bg-blue-600 text-white font-medium hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500 ${
               loading ? 'opacity-70 cursor-not-allowed' : ''
             }`}
           >
···
         <div className="mt-4 text-center">
           <Link
             to="/"
-            className="text-blue-500 hover:text-blue-700 transition-colors"
+            className="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
           >
             Cancel
           </Link>

packages/client/src/pages/OAuthCallbackPage.tsx

···
 
   return (
     <div className="flex items-center justify-center py-16">
-      <div className="bg-white rounded-lg shadow-sm p-8 max-w-md w-full text-center">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-8 max-w-md w-full text-center">
         {error ? (
           <div>
             <h2 className="text-2xl font-bold text-red-500 mb-4">
···
             <p className="text-red-500 mb-6">{error}</p>
             <button
               onClick={() => navigate('/login')}
-              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
+              className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors"
             >
               Try Again
             </button>
           </div>
         ) : (
           <div>
-            <h2 className="text-2xl font-bold text-gray-800 mb-4">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">
               Authentication in Progress
             </h2>
             <div className="flex justify-center mb-4">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 dark:border-blue-400"></div>
             </div>
-            <p className="text-gray-600">{message}</p>
+            <p className="text-gray-600 dark:text-gray-400">{message}</p>
           </div>
         )}
       </div>