diff --git a/apps/web/src/routes/login/+server.ts b/apps/web/src/routes/login/+server.ts
index 04e0d43..d4f63a8 100644
--- a/apps/web/src/routes/login/+server.ts
+++ b/apps/web/src/routes/login/+server.ts
@@ -40,10 +40,28 @@ export const GET: RequestHandler = async (event) => {
     <title>Acceder</title>
     <meta name="robots" content="noindex,nofollow" />
     <meta name="referrer" content="no-referrer" />
+    <meta name="color-scheme" content="light dark" />
     <style>
-      body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; padding: 2rem; }
-      .card { max-width: 480px; margin: 0 auto; border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; }
+      :root { color-scheme: light dark; }
+      body {
+        font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
+        padding: 2rem;
+        background: #ffffff;
+        color: #111111;
+      }
+      .card {
+        max-width: 480px;
+        margin: 0 auto;
+        border: 1px solid #dddddd;
+        border-radius: 8px;
+        padding: 1.5rem;
+        background: #ffffff;
+      }
       button[disabled] { opacity: .6; cursor: not-allowed; }
+      @media (prefers-color-scheme: dark) {
+        body { background: #0b0b0b; color: #eeeeee; }
+        .card { border-color: #333333; background: #161616; }
+      }
     </style>
   </head>
   <body>
