fix(web): Fix dark mode in auth pages

6 files changed, 10 insertions, 10 deletions

diff --git a/apps/web/app/check-email/page.tsx b/apps/web/app/check-email/page.tsx
index 96f0afb4..227e116c 100644
--- a/apps/web/app/check-email/page.tsx
+++ b/apps/web/app/check-email/page.tsx
@@ -44,7 +44,7 @@ export default function CheckEmailPage() {
 
   if (!email) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+      <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
         <Card className="w-full max-w-md">
           <CardHeader className="text-center">
             <CardTitle className="text-2xl font-bold">
@@ -65,7 +65,7 @@ export default function CheckEmailPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
       <Card className="w-full max-w-md">
         <CardHeader className="text-center">
           <CardTitle className="text-2xl font-bold">Check Your Email</CardTitle>
@@ -79,11 +79,11 @@ export default function CheckEmailPage() {
           </div>
 
           <div className="space-y-2 text-center">
-            <p className="text-sm text-gray-600">
+            <p className="text-sm text-muted-foreground">
               We&apos;ve sent a verification email to:
             </p>
-            <p className="font-medium text-gray-900">{email}</p>
-            <p className="text-sm text-gray-600">
+            <p className="font-medium text-foreground">{email}</p>
+            <p className="text-sm text-muted-foreground">
               Click the link in the email to verify your account and complete
               your registration.
             </p>
diff --git a/apps/web/app/forgot-password/page.tsx b/apps/web/app/forgot-password/page.tsx
index 1faa8967..0b765cf6 100644
--- a/apps/web/app/forgot-password/page.tsx
+++ b/apps/web/app/forgot-password/page.tsx
@@ -10,7 +10,7 @@ export default async function ForgotPasswordPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-8">
         <div className="flex items-center justify-center">
           <KarakeepLogo height={80} />
diff --git a/apps/web/app/reset-password/page.tsx b/apps/web/app/reset-password/page.tsx
index 1d05606e..e88349f1 100644
--- a/apps/web/app/reset-password/page.tsx
+++ b/apps/web/app/reset-password/page.tsx
@@ -24,7 +24,7 @@ export default async function ResetPasswordPage({
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-8">
         <div className="flex items-center justify-center">
           <KarakeepLogo height={80} />
diff --git a/apps/web/app/signin/page.tsx b/apps/web/app/signin/page.tsx
index a784dd7e..166e946a 100644
--- a/apps/web/app/signin/page.tsx
+++ b/apps/web/app/signin/page.tsx
@@ -10,7 +10,7 @@ export default async function SignInPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-8">
         <div className="flex items-center justify-center">
           <KarakeepLogo height={80} />
diff --git a/apps/web/app/signup/page.tsx b/apps/web/app/signup/page.tsx
index 841c07a8..ee77f65e 100644
--- a/apps/web/app/signup/page.tsx
+++ b/apps/web/app/signup/page.tsx
@@ -10,7 +10,7 @@ export default async function SignUpPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-8">
         <div className="flex items-center justify-center">
           <KarakeepLogo height={80} />
diff --git a/apps/web/app/verify-email/page.tsx b/apps/web/app/verify-email/page.tsx
index e8792465..da9b8b6b 100644
--- a/apps/web/app/verify-email/page.tsx
+++ b/apps/web/app/verify-email/page.tsx
@@ -72,7 +72,7 @@ export default function VerifyEmailPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
       <Card className="w-full max-w-md">
         <CardHeader className="text-center">
           <CardTitle className="text-2xl font-bold">