The header icons are not visible when choosing a light background

[szaimen]

How can we work around the following issue?

The header icons are not visible when choosing a light background image (same for admin chosen background image):

What about adding a switch that allows to invert the header icons? (I fear Ii don't see any other good solution to automate this)

cc @nimishavijay @jancborchardt

[jancborchardt]

I mean, they are also not properly visible if you pick a checkerboard background or something like that.

If you pick a custom background, the automatic color extraction by @skjnldsv will mostly take care of it (and set e.g. white as background color, so the icons would then be dark).

However if the majority of the image is not white, it can still be fixed by changing the color. No additional setting needed I'd say.

[szaimen]

If you pick a custom background, the automatic color extraction by @skjnldsv will mostly take care of it (and set e.g. white as background color, so the icons would then be dark).

I fear this is not how it works in my testing unfortunately... See the screenshot I've sent. (It chose dark blue for an almost completel white picture...

[skjnldsv]

If you pick a custom background, the automatic color extraction by @skjnldsv will mostly take care of it (and set e.g. white as background color, so the icons would then be dark).

No, this will not work reliably.
Have a look at an image like this, bright top-left header, so icons are not visible. But overall luminance is nowhere bright :)
Such edge cases are impossible to automate imho

[skjnldsv]

However if the majority of the image is not white, it can still be fixed by changing the color. No additional setting needed I'd say.

The invert of the top header is not based on the primary colour.

[szaimen]

What about adding a switch that allows to invert the header icons? (I fear Ii don't see any other good solution to automate this)

What about this idea?

[skjnldsv]

What about adding a switch that allows to invert the header icons? (I fear Ii don't see any other good solution to automate this)

What about this idea?

For me the only one that would work.
Automating this is not easily (if at all) doable unfortunately

[szaimen]

What about adding a switch that allows to invert the header icons? (I fear Ii don't see any other good solution to automate this)

What about this idea?

For me the only one that would work. Automating this is not easily (if at all) doable unfortunately

@jancborchardt would this be fine for you as well?

[susnux]

I do not think inverting the color does work here, as soon as you allow to set a background image you can not assume one color would work on the whole width of the menu bar.

I think the only solution working for every image is to not render the icon directly on the background but use a layer between with a fixed background like the dashboard panels.

This is also true for all other places where we render text directly on the background like the footer text on the login page, the site title on the header of public template or the "hello, NAME" on the dashboard.

So maybe we could add a option to enable a background on the header. I have created a mockup, it could look like this:

bright color mode
dark color mode

[skjnldsv]

@jancborchardt @nimishavijay ⬆️

[susnux]

After slept a night to think about it: While this fixes the dashboard, for every other app I am not sure if this is design-wise good 😕

files app	files app dark	files app with margin

[nimishavijay]

Yes, these are edge cases and unfortunately it would be difficult to make sure all cases are taken care of perfectly through automation. A switch for icons sounds the best to me as well, it can be a toggle with "Invert icon colors in the header" and it is off by default every time a new background is chosen.

A background for all the other items where there may be visibility issues would look like this:

I am not sure if this is a design we want. Perhaps if the background is causing so many issues it's simpler to just change the background :) cc @jancborchardt

[susnux]

I agree, so just adding the background on the greeting (dashboard) + login page would allow much more images so that adding an invert-icons switch should work :)

Especially on the login page we need an background, as even for the default image it breaks (currently only works for some users, see issue #36950 ).

[jancborchardt]

I think on the login page yep that’s fine and needed, as you say @susnux. The "Welcome" text starts looking a bit strange and ugly with the container around. We could make the text a tiny bit bigger as well, which can also fix contrast issues.

And also tbh, custom backgrounds are not covered by contrast requirements. As said if there’s a checkerboard background, or a screenshot or similar, then that’s just not something you should choose. That’s why I would say we shouldn’t do anything like a container for the big "Welcome" text or the apps header.

For example, we should also never put the Nextcloud logo on the login page inside a container because that will just make it look very ugly.