Ionic on dark theme input color

So when a device is in dark mode, it changes text to be white and background to be black which is all great if a user is already signed up and logged in.

Problem I have is new users get to the login/signup page and the input box is white and the placeholder text is white (so they don’t know what the fields mean) same when they enter info to the boxes it types in white.

I have tried so many things and cant seem to get it to change just the ion-input color.

For now I have forced to light scheme which works fine for iOS but not android. Looks right in emulators but on actual device it doesn’t.

@media (prefers-color-scheme: light) {

If I change the following to black it works, but then all text once they are logged in is black on black

    --ion-text-color: #ffffff;

How can I change just ion-input for dark theme to be black text and black placeholder in variables.scss under dark theme

1 Like