Very bright images make NC icons undiscernable / unusable

[ndx1905-github]

use GitHub reactions 👍 to show that you are affected by the same issue. Please don't comment if you have no relevant information to add!

• [x] This is not a feature request
• [x] This is not an image-provider request
• [x] I have searched the issuetracker if the issue is not already reported.

Describe the bug: When a image with very bright light colors is randomly picked up, there is no contrast with NC icons which make it practically unusable (need to reload the page to have more contrast).

To Reproduce: Steps to reproduce the behavior: Refresh page until a very light image is loaded Or.. look at the screenshots provided

Expected behavior: There should be a shadow or dark line around NC icons. Alternatively, header should be opaque.

Server:

• Nextcloud version: 24.0
• Splash-App version: 1.2.5

[newhinton]

This is not an easy one, and we had issues with contrast in the past. I generally consider this 'working as intended', since we cant check the image before display, to verify it 'looks good'.

However, i have added some featues in the dev-branch that may help. You will eventually be able to apply a tint to each image, which will give you the ability to generally increase contrast with any image that may be loaded

[ndx1905-github]

Thanks for the quick reply Tint on the whole image is a bit different. Would it be possible to add a tint just behind the header part? Or alternatively make sure the splash image is confined below the header?

[newhinton]

You can already disable the background image for the header in the settings under theming

[ndx1905-github]

It's already unticked.

Here is the behavior :

• if I tick Set random image as header background, then I have the splash background on every page header of every app.
• if I untick Set random image as header background, then I still have the header backgound on the login page and on the dashboard page. That's where my problem is and the unexpected behavior.

EDIT It's not a problem on the login page (no app icons anyway), but it's a problem on the dashboard page.

[ndx1905-github]

Okay This made the trick https://github.com/nextcloud/unsplash/issues/92#issuecomment-1097011966

[newhinton]

I have an idea to fix this permanently

[ndx1905-github]

Cool !

Just a comment on the css trick from

#header { background: var(--color-primary-element) !important; }

I noticed that in combination with splash :

• when first loaded, the header is in plain color

• if you scroll to the bottom, the header become a gradient of black (maybe because I have a dark mode? no idea). I think that gradient is a very nice feature that I'd like to have as the primary choice instead of plain.

Just a remark !

[joewashear007]

I have this issues too. I would love the extension to set a consistent semi-transparent header background. I think it would be a nice polish features as opposed to the bight colored bar from the rest of the nextcloud theme.

[newhinton]

The current dev-branch includes the ability to 'tint' an image. It looks like this, and it always applies the instance-color. This does increase readability, and should be a good way to deal with this issue

[ndx1905-github]

It would be great to have this tint functionality only behind the icon line and not for the whole image

[LaXiS96]

A workaround I'm using, added via the Custom CSS app:

#header > div {
  background: rgba(0, 0, 0, 0.33);
}

This CSS targets the header's inner divs as not to replace the background image, adding a dark overlay below the icons (play with the 0.33 to change opacity).

[maples3]

@LaXiS96 I didn't know about the custom CSS plugin, that's a great workaround!

I tweaked the CSS a little bit, and made the header bar style match up with Nextcloud's dark theme:

body > #header {
  background: rgba(23, 23, 23, 0.8) !important;
  backdrop-filter: blur(25px);
}

.content, #content {
  margin-top: 55px !important;
}

The margin is there so you don't end up with ugly corners like this:

It would be great to see this built in to the app, or at least an option in the settings. But in the meantime, the Custom CSS app provides a good workaround.