search

mjl- / mox

modern full-featured open source secure mail server for low-maintenance self-hosted email
https://www.xmox.nl
MIT License
3.36k stars 89 forks source link

webmail: add basic dark theme #163

Closed mattfbacon closed 1 month ago

mjl- commented 2 months ago

hi @mattfbacon, i suppose you are interested in getting a dark mode merged? at least the code change in this diff is small.

i don't normally use dark mode. but i tried this out. i noticed the white glow around the popups looked a bit strange. then i looked into what the internet says about designing a dark mode. seems that folks think it requires a bit more attention. another point raised (besides white glowing box-shadow) is stacking layers on top of each other (popups) works differently, and the layer on top should be lighter than the background layer (the current inversion doesn't do that, i tried it quickly, and it does look better that way). the colors for links also doesn't look too good to me.

have you considered making a more designed dark mode? the webmail has quite some inline styles, but not that many for colors. perhaps we can move some inline color styles to classes, so they can be styled differently in dark mode?

mattfbacon commented 2 months ago

So, I looked at the inline styles to try to extract the colors to css variables but there were just too many for it to feel effective (e.g., 5 shades of background color is too much)e So I went with the simpler color manipulation approach. I have been using this patch locally and it fits my use case perfectly. But I would still be interested in a "better" version that has the colors more intentionally chosen.

mjl- commented 2 months ago

@mattfbacon While looking at dark mode, and doing some prototyping, I went all the way of using CSS classes for styling, and taking the inline style colors out into webmail/lib.ts, and adding a mechanism to easily add different colors for dark mode. This is a start, next steps would be to write some code that derives some of the colors (in darker/lighter shades) from a base color. Then we would also be close to making colors configurable. See commit message for details.

If new dark mode colors certainly aren't perfect, ideas to improve welcome.

mattfbacon commented 2 months ago

Ok, as long as it supports prefers-color-scheme

mjl- commented 1 month ago

@mattfbacon yes, the darkmode styles (colors) are added with @media prefers-color-scheme dark. i'll close this PR, thanks for sending it in. styling fixes could come in a new PR.