Always render text fields with white bg + black text

Input fields keep white background (#fff) and slate-900 text in all
colour modes. Light gray text on white (dark mode bleedthrough) was
unreadable. Applies to both the shadcn Input component and raw
<input>/<textarea>/<select> elements in older pages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
2026-04-17 15:04:36 +02:00
parent 07c2428609
commit 3a501f7e05
2 changed files with 25 additions and 1 deletions
+1 -1
View File
@@ -9,7 +9,7 @@ const Input = React.forwardRef<
<input
type={type}
className={cn(
"flex h-10 w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full rounded-lg border border-border bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
+24
View File
@@ -90,3 +90,27 @@ button:not([class]):disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Text field appearance ───────────────────────────────────────────────────
Inputs keep white background + dark text in all colour modes so that typed
content is always easy to read regardless of theme.
────────────────────────────────────────────────────────────────────────── */
input:not([class]),
textarea:not([class]),
select:not([class]) {
background-color: #ffffff;
color: #0f172a; /* slate-900 */
border: 1px solid rgb(var(--color-border));
border-radius: var(--radius);
padding: 0.375rem 0.625rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
input:not([class]):focus,
textarea:not([class]):focus,
select:not([class]):focus {
outline: 2px solid rgb(var(--color-primary));
outline-offset: 2px;
}