nginx-proxy-manager icon indicating copy to clipboard operation
nginx-proxy-manager copied to clipboard

Darkmode border Modal Dialog

Open vsc55 opened this issue 1 month ago • 10 comments

Is your feature request related to a problem? Please describe. This is more of an aesthetic detail than a functional one. With dark mode active, when opening a dialog box, such as an event in the Audit Log section, the dialog box outline is not clearly defined.

Image

Describe the solution you'd like Add a lighter color to the edge to create contrast.

Describe alternatives you've considered Add Styple border-color:

Image

Result:

Image

vsc55 avatar Nov 07 '25 09:11 vsc55

A border should not be used to fix this, as it's not addressing the problem. The fix should be:

  • Actually darken the backdrop, instead of reducing opacity. Currently the backdrop is the same color as the background of the modal.
  • Backdrop-filter blur (might not even be needed).
  • Use a dark shadow for the modal. Currently the modals have white shadows in darkmode. I've never seen a white shadow in real life, so also don't use it in UI.
Image

This is what it looks like when you darken the backdrop, do a blur and use a dark shadow:

Image

harrybawsac avatar Nov 07 '25 13:11 harrybawsac

Yes, it looks much better.

vsc55 avatar Nov 07 '25 13:11 vsc55

Image

but yes i see what you mean the darker shadow is better

lastsamurai26 avatar Nov 10 '25 06:11 lastsamurai26

Interesting, honestly it makes no difference to my eye hahah, isn't it better if it blends in with the modal?

7heMech avatar Nov 11 '25 12:11 7heMech

Interesting, honestly it makes no difference to my eye hahah, isn't it better if it blends in with the modal?

No. The modal is an overlay and should therefore stand out as such. It's the whole point of an overlay, to make it pop out 😂

harrybawsac avatar Nov 14 '25 09:11 harrybawsac

Interesting, honestly it makes no difference to my eye hahah, isn't it better if it blends in with the modal?

No. The modal is an overlay and should therefore stand out as such. It's the whole point of an overlay, to make it pop out 😂

Ong, I finally noticed what the issue is, I thought we were talking about the borders of the dark codebox in the modal and I was tripping 😅 I guess this is what no sleep does to a man.

7heMech avatar Nov 14 '25 10:11 7heMech

I mean if you darken the background doesn't that solve the issue?

7heMech avatar Nov 14 '25 10:11 7heMech

Darkening the ~~background~~ backdrop does solve the issue, yes

harrybawsac avatar Nov 14 '25 10:11 harrybawsac

Current:

Image

Proposal:

Image

harrybawsac avatar Nov 14 '25 10:11 harrybawsac

Hm, looking at how the app works, I'm honestly fine with the gray background, but I guess 3 people beats one, I'll suggest it in my upcoming PR.

Edit: It looks so much better 🤤

7heMech avatar Nov 14 '25 13:11 7heMech