Repository navigation
The header icons are not visible when choosing a light background #35482
Description
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)
Activity
jancborchardt commentedon Nov 29, 2022
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 commentedon Nov 29, 2022
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 commentedon Nov 29, 2022
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 commentedon Nov 29, 2022
The invert of the top header is not based on the primary colour.
szaimen commentedon Nov 29, 2022
What about this idea?
skjnldsv commentedon Nov 30, 2022
For me the only one that would work.
Automating this is not easily (if at all) doable unfortunately
florianwgnr commentedon Dec 4, 2022
szaimen commentedon Dec 4, 2022
@jancborchardt would this be fine for you as well?
florianwgnr commentedon Dec 4, 2022
susnux commentedon May 3, 2023
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:
skjnldsv commentedon May 4, 2023
@jancborchardt @nimishavijay ⬆️
susnux commentedon May 4, 2023
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 😕
nimishavijay commentedon May 4, 2023
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 commentedon May 4, 2023
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 commentedon May 4, 2023
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.