fix: prevent WebKit/GTK system theme from overriding input text colors on Linux
Some checks failed
Test / frontend-typecheck (push) Waiting to run
Test / frontend-tests (push) Waiting to run
Test / rust-fmt-check (push) Successful in 1m8s
Test / rust-clippy (push) Successful in 7m37s
Test / rust-tests (push) Has been cancelled
Release / build-linux-amd64 (push) Failing after 30s
Release / build-linux-arm64 (push) Waiting to run
Release / build-windows-amd64 (push) Has been cancelled
Some checks failed
Test / frontend-typecheck (push) Waiting to run
Test / frontend-tests (push) Waiting to run
Test / rust-fmt-check (push) Successful in 1m8s
Test / rust-clippy (push) Successful in 7m37s
Test / rust-tests (push) Has been cancelled
Release / build-linux-amd64 (push) Failing after 30s
Release / build-linux-arm64 (push) Waiting to run
Release / build-windows-amd64 (push) Has been cancelled
On Linux, WebKit inherits GTK system text colors for form controls, causing dark-on-dark text in dark mode. Explicitly set color and -webkit-text-fill-color on inputs/textareas/buttons, and add color-scheme: dark to .dark so WebKit uses the correct system UI color scheme. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
5d29f7fb61
commit
9c3f924f27
@ -51,4 +51,21 @@
|
||||
@layer base {
|
||||
* { @apply border-border; }
|
||||
body { @apply bg-background text-foreground; }
|
||||
|
||||
/* Prevent WebKit/GTK from overriding form control colors with system theme */
|
||||
input, textarea, select, button {
|
||||
color: hsl(var(--foreground));
|
||||
background-color: hsl(var(--background));
|
||||
-webkit-text-fill-color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
input::placeholder, textarea::placeholder {
|
||||
color: hsl(var(--muted-foreground));
|
||||
-webkit-text-fill-color: hsl(var(--muted-foreground));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tell WebKit which color scheme is active so system UI elements match */
|
||||
:root { color-scheme: light; }
|
||||
.dark { color-scheme: dark; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user