much better coloring

pages/forgot.tsx

@@ -40,27 +40,31 @@ export default function Forgot() {
 
   return (
     <CenteredForm>
-      <div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
-        <p className="text-2xl text-black font-bold">Password Recovery</p>
+      <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
+        <p className="text-2xl text-black dark:text-white font-bold">
+          Password Recovery
+        </p>
         <div>
-          <p className="text-md text-black">
+          <p className="text-md text-black dark:text-white">
             Enter your Email so we can send you a link to recover your account.
             Make sure to change your password in the profile settings
             afterwards.
           </p>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
             You wont get logged in if you haven&apos;t created an account yet.
           </p>
         </div>
         <div>
-          <p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+            Email
+          </p>
 
           <input
             type="text"
             placeholder="johnny@example.com"
             value={form.email}
             onChange={(e) => setForm({ ...form, email: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none dark:focus:border-sky-600 dark:border-neutral-700 dark:bg-neutral-900 focus:border-sky-700 duration-100"
           />
         </div>
 
@@ -71,7 +75,10 @@ export default function Forgot() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <Link href={"/login"} className="block text-black font-bold">
+          <Link
+            href={"/login"}
+            className="block text-black dark:text-white font-bold"
+          >
             Go back
           </Link>
         </div>