expressjs.com
expressjs.com copied to clipboard
expressjs
Issue with Dark Mode: Poor Visibility of Selected Input
In the dark mode of the application, the design of the input when it is selected is not suitable and appears difficult to distinguish. This negatively impacts the user experience and may hinder interaction with the application.
Steps to Reproduce:
1.Switch to dark mode in the application settings. 2.Select an input in any part of the application where text input is required. 3.Note that the selected input does not stand out clearly against the dark background.
Expected Behavior: The selected input should have a style or color that makes it clearly visible and distinguishable from the dark background, ensuring a smooth and confusion-free user experience.
Screenshot.
Can I open a PR to fix this bug?
Thanks for the feedback. It's just using the default focus outline that light mode also uses, but I see it is kind of cut off and doesn't look great. It's also seems to be different for Mac and Windows. It's blue on mac and grey on windows. I use a mac, so...
I cross browser tested, but not cross OS.
I tried to use github as the benchmark, and github just uses the blue outline. So if you can fix it so it's not cut off on the right, and maybe try to make it blue like github does, and make this work for both mac and windows? But leave the light mode setting as is.
Does this sound okay @crandmck ?
Yes, I agree any fix shouldn't affect light mode. @chrisdel101
Interestingly, in dark mode I don't see the search input field cut off as shown in the screenshot. Chrome on Mac. @itsaalexk you didn't note your browser/OS, presumably that affects the behavior.
@crandmck The OS that im using is windows 11 and it was tested on Chrome and Brave browser , on both the bug still appears.
Yes, please proceed @itsaalexk ...
More screenshots of the issue you're addressing would be great. The screenshot you provided doesn't actually show any text, just the icon and "search" that appear when you haven't typed anything--so those not on Windows (Chrome or Brave) can't see the problem you're describing.
@crandmck Please close this issue, it was resolved in PR https://github.com/expressjs/expressjs.com/pull/1533
