Input type "date" dark datepicker icon not visible on dark background

[johnaau]

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;
}

[Carl-Hugo]

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-scheme vs. the .bootstrap-dark class? 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.md file).