Implement dark mode on dashboard

my-appwrite-login-page/src/app/dashboard/crud/page.js

@@ -81,7 +81,7 @@ const CrudPage = () => {
                 <div className="bg-white p-6 shadow-md rounded-lg mb-6">
                     <input type="text" placeholder="Enter title" value={title} onChange={(e) => setTitle(e.target.value)} className="border p-3 rounded w-full mb-3" />
                     <input type="text" placeholder="Enter description" value={description} onChange={(e) => setDescription(e.target.value)} className="border p-3 rounded w-full mb-3" />
-                    <button onClick={createDocument} disabled={userRole === "reader"} className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md transition">Create Document</button>
+                    <button onClick={createDocument} disabled={userRole === "reader"} className="w-full bg-blue-400 hover:bg-blue-950 text-white py-2 rounded-md transition">Create Document</button>
                 </div>
             )}
 
@@ -92,7 +92,7 @@ const CrudPage = () => {
                         <p className="text-gray-600">{doc.description || "No description available"}</p>
                         {userRole !== "reader" && (
                             <div className="mt-4 flex space-x-2">
-                                <button onClick={() => updateDocument(doc.$id)} className="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded transition">Edit</button>
+                                <button onClick={() => updateDocument(doc.$id)} className="bg-sky-800 hover:bg-sky-950 text-white px-4 py-2 rounded transition">Edit</button>
                                 <button onClick={() => deleteDocument(doc.$id)} className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded transition">Delete</button>
                             </div>
                         )}

my-appwrite-login-page/src/app/dashboard/page.js

@@ -2,9 +2,11 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { account } from "@/lib/appwrite";
+import { useTheme } from "@/components/ThemeProvider";
 
 export default function Dashboard() {
     const [user, setUser] = useState(null);
+    const { darkMode } = useTheme();
 
     useEffect(() => {
         const getUser = async () => {
@@ -28,28 +30,42 @@ export default function Dashboard() {
     };
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 text-black dark:text-white">
+        <div className={`flex flex-col items-center justify-center min-h-screen 
-            <h1 className="text-xl font-bold">Welcome to Dashboard</h1>
+            ${darkMode ? 'bg-gray-800' : 'bg-gray-50'} // Softer dark background
+            ${darkMode ? 'text-gray-100' : 'text-gray-800'} // Softer text color
+            transition-colors duration-200 // Smooth transition
+        `}>
+            <h1 className="text-2xl font-bold mb-6">Welcome to Dashboard</h1>
+            
             <Link href="/dashboard/crud">
-                <button className="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 mt-4 rounded">
+                <button className={`
+                    ${darkMode ? 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-500 hover:bg-blue-600'} 
+                    text-white px-4 py-2 rounded-lg shadow-md
+                    transition-colors duration-200
+                `}>
                     Go to CRUD Page
                 </button>
             </Link>
+            
             {user ? (
-                <>
+                <div className="mt-8 text-center">
-                    <h1 className="text-xl font-bold mt-4">
+                    <h1 className="text-xl font-semibold mb-4">
                         Welcome, {user.name || user.email || "User"}
                     </h1>
                     <button
-                        className="bg-red-500 dark:bg-red-700 text-white px-4 py-2 mt-4 rounded"
+                        className={`
+                            ${darkMode ? 'bg-red-600 hover:bg-red-700' : 'bg-red-500 hover:bg-red-600'}
+                            text-white px-4 py-2 rounded-lg shadow-md
+                            transition-colors duration-200
+                        `}
                         onClick={handleSignOut}
                     >
                         Sign Out
                     </button>
-                </>
+                </div>
             ) : (
-                <h1 className="mt-4">Loading....</h1>            
+                <h1 className="mt-8 text-lg">Loading...</h1>            
             )}
         </div>
     );
-}
+}

my-appwrite-login-page/src/app/login/page.js

@@ -72,7 +72,7 @@ export default function Auth() {
                     onChange={(e) => setPassword(e.target.value)}
                     required
                 />
-                <button type="submit" className="bg-blue-500 text-white p-2">
+                <button type="submit" className="bg-blue-950 text-white p-2">
                     {isLogin ? "Login" : "Sign Up"}
                 </button>
             </form>