iPhone angular 19 material text color in light mode is white

Desktop, Android phone is fine. I am using Chrome to test it.

By default, it's light.

The text is white on iPhone both with Chrome and Safari.

I had no clue why.

See light-mode:

See dark-mode which is OK:

Here is the config which is pretty much the basic default suggest by Angular Material

@use '@angular/material' as mat;
html {
height: 100%;
color-scheme: light dark;
@include mat.theme((
color: mat.$azure-palette,
typography: Roboto,
density: 0));
}

body {
height: 100vh;
margin: 0;
background-color: #eeeeee;
//font-family: mat.get-theme-typography($my-theme);
}

body.dark-mode {
color-scheme: dark;
background-color: #222222;
color: white;
}

Continue reading...