Issue with Dark Mode: Poor Visibility of Selected Input

[itsaalexk]

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?

[crandmck]

@chrisdel101

[chrisdel101]

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 ?

[jonchurch]

thanks for the report @itsaalexk, feel free to PR

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

[itsaalexk]

Im proceeding with creating the PR to fix this bug,

[itsaalexk]

@crandmck The OS that im using is windows 11 and it was tested on Chrome and Brave browser , on both the bug still appears.