Repository navigation
Input type "date" dark datepicker icon not visible on dark background #71
Description
When using a input of type date, the browser renders a calendar icon inside the input control, however this is black so is not visible with a dark background.
I found a https://stackoverflow.com/a/70841645 on Stack Overflow and this CSS below seems to be the best solution. It makes the icon white and the date picker also appears in a dark mode.
input {
color-scheme: dark;
}
Activity
Carl-Hugo commentedon Mar 27, 2024
Thanks for raising this @johnaau
However, this issue requires some investigation and thorough testing. For example, is there a difference between using the
prefers-color-schemevs. the.bootstrap-darkclass? Is the issue happening for all browsers? Etc.I don't know when I'll have the time to look into this, so feel free to share your strategy to fix this. Once we agree on something, I'll welcome a PR with the fix. The PR should include a calendar example in the "Forms" page and an updated screenshot of that page (the screenshots are in the
./README.mdfile).