Styling of native date picker on Android

Question

We have following issue:

We use an inApp browser to render a website to onboard a customer
We have an input field with type="date". Clicking this field renders the usual device-dependent date picker view
On Android devices we realized, that the date picker is going to a dark mode and the UX gets disturbed (see screenshot).

Is there any way of how to control the styling of the date picker?

We tried to implement an input type="date" field and expect a date picker which is correctly styled

so it's a web issue then. Maybe you can update the style on the input date with color-scheme — AinulBedjo
– AinulBedjo, Commented Aug 9, 2024 at 9:27
but how is this overlay etc deciding on color, this grey overlay is introduced once you clicked the input field. the page itself is white — Kalle
– Kalle, Commented Aug 9, 2024 at 11:38
have you tried updated the color-scheme on calendar element? i will post my answer to that. — AinulBedjo
– AinulBedjo, Commented Aug 12, 2024 at 4:40

AinulBedjo · Accepted Answer · 2024-08-12 04:41:14Z

I think it's a web issue, try using color-scheme to the input?

.input-date { color-scheme: light; }

<input type="date" class="input-date" />

1 Answer 1