Fix login form light-mode contrast, add theme toggle to auth pages

apps/web/src/components/auth/login-form.tsx

@@ -11,6 +11,7 @@ import {
 import { useIsMutating } from "@tanstack/react-query";
 import { cn } from "cnfast";
 import { Eye, EyeOff, Lock, Mail } from "lucide-react";
+import { useTheme } from "next-themes";
 import {
 	type Dispatch,
 	type ReactNode,
@@ -57,11 +58,15 @@ export type LoginFormProps = {
 };
 
 function LoginAgentsPanel() {
+	const { resolvedTheme } = useTheme();
+	const flickerColor =
+		resolvedTheme === "dark" ? "rgb(255, 255, 255)" : "rgb(0, 0, 0)";
+
 	return (
-		<div className="relative hidden min-h-100 overflow-hidden border-white/10 border-l bg-black md:block">
+		<div className="relative hidden min-h-100 overflow-hidden border-l bg-muted md:block">
 			<FlickeringGrid
 				className="absolute inset-0 z-0"
-				color="rgb(255, 255, 255)"
+				color={flickerColor}
 				maxOpacity={0.12}
 			/>
 			<div className="absolute inset-0 z-1">
@@ -152,7 +157,6 @@ function PasswordAuthFields({
 						<Input
 							aria-invalid={!!emailError}
 							autoComplete="email"
-							className="bg-black/75 dark:bg-black/75"
 							disabled={isPending}
 							id="email"
 							name="email"
@@ -176,7 +180,7 @@ function PasswordAuthFields({
 
 					<Field data-invalid={!!passwordError}>
 						<FieldLabel htmlFor="password">{labels.password}</FieldLabel>
-						<InputGroup className="bg-black/75 dark:bg-black/75">
+						<InputGroup>
 							<InputGroupInput
 								aria-invalid={!!passwordError}
 								autoComplete="current-password"
@@ -259,7 +263,7 @@ function PasswordAuthFields({
 					{captcha}
 
 					<Button
-						className="relative overflow-visible bg-foreground text-background hover:bg-white hover:text-background"
+						className="relative overflow-visible bg-foreground text-background hover:bg-foreground/90"
 						disabled={isPending}
 						type="submit"
 					>
@@ -313,7 +317,6 @@ function MagicLinkAuthFields({
 					<Input
 						aria-invalid={!!emailError}
 						autoComplete="email"
-						className="bg-black/75 dark:bg-black/75"
 						disabled={isPending}
 						id="email"
 						name="email"
@@ -338,7 +341,7 @@ function MagicLinkAuthFields({
 
 				<div className="flex flex-col gap-3">
 					<Button
-						className="bg-foreground text-background hover:bg-white hover:text-background"
+						className="bg-foreground text-background hover:bg-foreground/90"
 						disabled={isPending}
 						type="submit"
 					>
@@ -447,7 +450,7 @@ export function LoginForm({
 		<>
 			<Show when={canUseEmailAndPassword}>
 				<Button
-					className="w-full bg-white/8 hover:border-primary hover:bg-white/12 dark:bg-white/8 dark:hover:bg-white/12"
+					className="w-full hover:border-primary"
 					disabled={isPending}
 					onClick={() => {
 						setMode(mode === "signIn" ? "magicLink" : "signIn");
@@ -582,9 +585,9 @@ export function LoginForm({
 
 	return (
 		<div className={cn("flex w-full flex-col gap-6", className)}>
-			<Card className="overflow-hidden border-white/10 bg-black p-0 shadow-none">
+			<Card className="overflow-hidden p-0 shadow-none">
 				<CardContent className="grid p-0 md:grid-cols-2">
-					<div className="bg-black p-6 md:p-8">
+					<div className="p-6 md:p-8">
 						<AuthPrompts view={view} />
 
 						<div className="flex flex-col gap-6">

apps/web/src/components/auth/provider-button.tsx

@@ -67,7 +67,7 @@ export function ProviderButton({
 	return (
 		<Button
 			className={cn(
-				"relative overflow-visible bg-white/8 hover:border-primary hover:bg-white/12 dark:bg-white/8 dark:hover:bg-white/12",
+				"relative overflow-visible hover:border-primary",
 				className
 			)}
 			disabled={isPending}

apps/web/src/components/home/hero.tsx

@@ -80,7 +80,7 @@ export function Hero() {
 
 				<div className="mb-14 flex flex-col items-center gap-4">
 					<Link
-						className="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-[10px] bg-foreground px-4 font-semibold text-[15px] text-background transition-transform hover:-translate-y-px hover:bg-white active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60"
+						className="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-[10px] bg-foreground px-4 font-semibold text-[15px] text-background transition-transform hover:-translate-y-px hover:bg-foreground/90 active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60"
 						search={{ callbackUrl: "/workers" }}
 						to="/auth"
 					>

apps/web/src/components/home/home-nav.tsx

@@ -1,10 +1,8 @@
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
 import { useEffect, useRef } from "react";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 export function HomeNav() {
 	const navRef = useRef<HTMLElement>(null);
-	const { resolvedTheme, setTheme } = useTheme();
 
 	useEffect(() => {
 		const nav = navRef.current;
@@ -27,15 +25,7 @@ export function HomeNav() {
 			style={{ background: "var(--home-nav-bg)" }}
 		>
 			<div className="flex items-center justify-end gap-6 px-12 py-4">
-				<button
-					aria-label="Toggle theme"
-					className="relative flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground"
-					onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
-					type="button"
-				>
-					<Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-					<Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-				</button>
+				<ThemeToggle />
 			</div>
 		</nav>
 	);

apps/web/src/components/theme-toggle.tsx

@@ -0,0 +1,26 @@
+import { cn } from "cnfast";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+export type ThemeToggleProps = {
+	className?: string;
+};
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+	const { resolvedTheme, setTheme } = useTheme();
+
+	return (
+		<button
+			aria-label="Toggle theme"
+			className={cn(
+				"relative flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground",
+				className
+			)}
+			onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+			type="button"
+		>
+			<Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+			<Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+		</button>
+	);
+}

apps/web/src/routes/auth/route.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 export const Route = createFileRoute("/auth")({
 	component: AuthLayout,
@@ -7,6 +8,7 @@ export const Route = createFileRoute("/auth")({
 function AuthLayout() {
 	return (
 		<div className="relative flex min-h-screen flex-col items-center justify-center bg-(--home-page-bg) px-6 text-foreground antialiased">
+			<ThemeToggle className="absolute top-4 right-4 z-10" />
 			{/* Overflow clipped on the grid layer only — parent overflow:hidden breaks backdrop-filter. */}
 			<div
 				aria-hidden="true"