Thank Goodness I'm not the only one January 16, 2025
Bootstrap borders are far too light
A lot of people prefer “dark mode” on websites now. I still don't have burnt retinas, and enjoy and appreciate the beauty of light mode. On Bootstrap 5.3, apparently a change was made to the default border color used on form controls. I haven't noticed it until this project when I was doing a lot of forms.
So I set out to change it. It's especially a problem on checkboxes. Because they are just border and nothing else! Initially I did this:
This did solve the problem. Then I was researching more, and came across an issue on the Bootstrap github repo. Phew! I'm not the only one. They are nearly impossible to see.
That led me to my current solution. Very easy. I was actually looking into setting the background color before, and had no success with setting the Bootstrap variable. It wasn't having any effect. But then I thought, I just want to change the border anyway, because changing the background it would have to be a dark background, since the check mark inside of the checkbox is light. But it led me to this:
Which is more global and updates the border on everything. This is perfectly acceptable. I just have it in the <head> now, that's probably fine :) I didn't know about CSS variables! That's useful. So now people won't think they are blind when they can't see the checkboxes and other form inputs. I'm watching that issue on github, hopefully they fix it soon, but until then, this will work fine.
UPDATE: I actually went back to the first method, as the border change globally was way too drastic!
Happy coding!