I am using SwiftUI's native SecureField. When a user types their password manually, the dots render correctly in both light and dark mode. However, when iOS suggests and autofills a strong generated password, the dots become invisible in dark mode. Switching to light mode shows that they are there.
Is there a supported way to force SecureField to re-render its secure entry dots correctly after iOS fills in a strong generated password in dark mode?
import SwiftUI
let warmMustard = Color(red: 0.780, green: 0.659, blue: 0.290)
let lightText = Color(red: 0.973, green: 0.961, blue: 0.933)
let darkText = Color(red: 0.118, green: 0.118, blue: 0.118)
struct SecureFieldTestView: View {
@Environment(\.colorScheme) var colorScheme
@State private var username = ""
@State private var password = ""
@State private var confirmPassword = ""
var body: some View {
ZStack {
Color(colorScheme == .dark ? UIColor.black : UIColor.white)
.ignoresSafeArea()
VStack(spacing: 20) {
Text("Dark mode dot reproduction")
.foregroundColor(colorScheme == .dark ? .white : .black)
TextField("Username", text: $username)
.textContentType(.username)
.autocorrectionDisabled()
.textInputAutocapitalization(.never)
.padding()
.background(colorScheme == .dark ? Color.black : Color.white)
.cornerRadius(8)
.foregroundColor(colorScheme == .dark ? .white : .black)
.overlay(RoundedRectangle(cornerRadius: 8).stroke(warmMustard, lineWidth: 2))
SecureField("Password", text: $password)
.textContentType(.newPassword)
.padding()
.background(colorScheme == .dark ? Color.black : Color.white)
.cornerRadius(8)
.foregroundColor(colorScheme == .dark ? .white : .black)
.overlay(RoundedRectangle(cornerRadius: 8).stroke(warmMustard, lineWidth: 2))
SecureField("Confirm Password", text: $confirmPassword)
.textContentType(.newPassword)
.padding()
.background(colorScheme == .dark ? Color.black : Color.white)
.cornerRadius(8)
.foregroundColor(colorScheme == .dark ? .white : .black)
.overlay(RoundedRectangle(cornerRadius: 8).stroke(warmMustard, lineWidth: 2))
}
.padding(.horizontal, 32)
}
}
}
#Preview {
SecureFieldTestView()
}
2
0
32