Fix autofilled text visibility in dark mode (#22088)

harryzcy · web-flow · commit a95247b7dfb8 · 2022-12-13T19:06:23.000+08:00
Fixes #22087
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
@@ -1354,6 +1354,12 @@ a.ui.card:hover,
   border-color: var(--color-error-border) !important;
 }
 
+// A fix for text visibility issue in Chrome autofill in dark mode.
+// It's a problem from Formatic UI, and this rule overrides it.
+.ui.form .field.field input:-webkit-autofill {
+  -webkit-text-fill-color: var(--color-black) !important;
+}
+
 .ui.loading.loading.input > i.icon svg {
   visibility: hidden;
 }

Original file line number	Diff line number	Diff line change
`@@ -1354,6 +1354,12 @@ a.ui.card:hover,`
`1354`	`1354`	`border-color: var(--color-error-border) !important;`
`1355`	`1355`	`}`
`1356`	`1356`
	`1357`	`+// A fix for text visibility issue in Chrome autofill in dark mode.`
	`1358`	`+// It's a problem from Formatic UI, and this rule overrides it.`
	`1359`	`+.ui.form .field.field input:-webkit-autofill {`
	`1360`	`+ -webkit-text-fill-color: var(--color-black) !important;`
	`1361`	`+}`
	`1362`	`+`
`1357`	`1363`	`.ui.loading.loading.input > i.icon svg {`
`1358`	`1364`	`visibility: hidden;`
`1359`	`1365`	`}`