Oct 2024
8 / 8
Feb 10
Feb 10
David_C_Rankin
Oct '24
1

Ralf, Stefan, all,

I love the dark-mode, but I need to be able to tweak the background color. Reason: I find dark-mode much easier on my eyes, but the black (#000000) background-color creates a contrast with the text that is just a harsh as a black on white contrast.

I’ve done quite a bit of dark theme work and I’ve found a slight variation of brightness and saturation really help that problem. A background-color of #101419 or even as dark as #06090d softens the contrast enough to be much easier on the eyes.

Currently the dark-mode with default black background looks like:

egw-dark-mode
egw-dark-mode.png1253x200 44.1 KB

Is there any place I can set the background-color for the dark theme globally to soften the contrast a bit?

  • created

    Oct '24

  • last reply

    Feb 10
  • 7

    replies

  • 213

    views

  • 4

    users

  • 1

    like

  • 1

    link

StefanUEGroupware GmbH
Oct '24

Hi David.

Yes, the dark mode colors are not optimal. In several places… Especially the black in the area/background.

We will probably adjust the colors for the next major update.

In the UI: No
I don’t know the places in the code.

Stefan

2 months later
David_C_Rankin
Dec '24

That looks AMAZING!! Just my personal taste would be to darken slightly to #262626 to provide clearer contrast between the background and text. But, understand, were are just talking about minor nits now, so everybody will have their own preference.

Just as an experiment, you might do 2 or 3 screen shots with variations and open a poll for the eGroupware community and customers to vote on?

That’s a good way to spur some community involvement and make everybody feel like they have been a part of eGroupware and have a bit of pride in their favorite groupware package because they helped.

No matter what you do, that dark mode is more than 100% acceptable and much easier on the eyes than the light versions.

Keep up the great work!

1 month later
lschmidt
Feb 6

Hello David, Stefan,

recently, this new update was introduced at my workplace, including the change in dark theme.
I find this new change looks very washed-out, almost blurry due to the fact all colors are compressed to a much smaller dynamic range (white to gray, black to light-gray). This new dark theme also doesn’t have enough contrast if the text is originally greyed-out in the light theme (like the left sidebar of pages), see: https://webaim.org/resources/contrastchecker/?fcolor=4F4E4F&bcolor=2D2C2D for a contrast check.
I would like to ask if there is any way to change it back to before (full black).

I found that the adjustment i would like to make to the dark theme would only require changing this CSS rule:

@media all {
    html[data-darkmode="1"] {
       filter: invert(.82) hue-rotate(180deg) brightness(1);
    }
}

specifically, changing invert(.82) to invert(1). Is there any intended way to do this, without having to edit sources?

Greetings,
- ls

RalfBeckerEGroupware GmbH
Feb 6

As some users prefer the new less contrast dark-mode over the old high-contrast one, we probably need a preference which one you want.

I think it also depends a lot on the screen resolution and density, if that is not high enough, the new, less contrast dark-mode appears blury and washed out, while on a high resolution display, it’s nicely readable …

Ralf

lschmidt
Feb 6

Yes, its possible this is a resolution issue - though i’m at a bog-standard 1920x1080 res 22 inch diagonal at 100% OS scaling and 100% browser zoom. About as standard as you can get.

I understand that others might like the new version, but i think ideally there would be a proper dark theme with background color and text color adjusted individually in CSS, instead of this filter which affects everything.

David_C_Rankin
Feb 10

It’s coming along. Last screenshot from Stefan showed a #2e2e2e background. Don’t be afraid to drop that down. Anywhere between $262626 and #1e1e1e is prime. Also, don’t be afraid to put a little desaturated blue in, like in the range of #1C1D20 to #212225. I don’t know why, but I’ve always found a hint of desaturated blue helps with the text contrast without having to increase the text brightness. A text color between #e0e0e0 and #ddd usually works well.

Ralf has got to be getting pretty old now, so his eyes should qualify as older eyes (like mine). Get him to look at a couple of variations and choose the best. It will help all us “elders” out :slight_smile: