search

ForEvolve / bootstrap-dark

Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark!
MIT License
299 stars 44 forks source link

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

Open johnaau opened 7 months ago

johnaau commented 7 months ago

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 commented 7 months ago

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).