App menu should be white with dark icons to fit style

[jancborchardt]

The dark app menu is a big thing sticking out in the design of Nextcloud. We wanted to make it bright (just like the user menu on the right) for some time now but there’s a … tiny problem. The app icons are all white.

Since all app icons are only available as white versions in the repo and there’s no way we can uniformly get them to all change (and be backwards compatible), we need to perform some SVG messing magic. The good thing is that since we deprecated the PNG fallback it will be much easier probably.

@juliushaertl you seem to be the right person for the job? ;) cc @nextcloud/designers

[icewind1991]

It would be best to look at the configured theme color for whether it should be a dark or light background, it will stand out otherwise if people have configured their nc to be dark themed

[jancborchardt]

This has nothing to do with the theme at the moment, but about our default look. Sure in the future it could be adjusted, but the most important thing is that the default needs to work, and that the apps dropdown is consistent with the user dropdown on the right – which is bright.

[Bugsbane]

@jancborchardt is right that we need to have consistency between the user menu and the app menu colours, and also that it works better with the default if it's light. I do question though, whether having the menu and the background it's placed over be the same colour, is a Good Thing™ for visual distinction.

Might I recommend that both menus use a background colour that is say, the theme colour at 98% lightness and 30% saturation of the theme colour (for the default, this works out at #f8fafb)? It's subtle, but distinguishes them from the background page content, and links it to being an extension of the header like so:

For the moment, just incorporating #f8fafb into both menus background colour would be enough for the default theme, and then later we could look at extending to modified theme colours later.

(And yes, I get that this issue is mainly a discussion about the app menu colours - This was just easier to demonstrate on the user menu, as it already has a dark on light colour scheme)

[williambargent]

At first glance, it looks a bit dull, and that would mean introducing another colour.

[juliushaertl]

@jancborchardt I like the idea, the dark menu was always looking kind of heavy on such a light modern design.

CSS Filter invert() would do the job quite fast, but again no support for IE. But we can use -ms-filter there as it is already used for opacity.

Even if this is possible, I have a bad feeling about maipulating all app icons by default. New developers may run into problems, creating a dark icon, that will then appear in white, so we should at least state how icons should look somewhere in the documentation.

Should we plan to require something like a app-dark.svg icon besides the default one?

[jancborchardt]

@Bugsbane that looks a bit like we wanted to make it white but didn’t succeed. The shadow already takes care of differentiating. Introducing another color is not necessary.

And yeah – we keep veering of the main issue here. ;D Let’s fix one thing at a time.

[jancborchardt]

@juliushaertl awesome!! :) Can you open a pull request for that? And the icons could just be a bit lighter, but details.

Regarding the app icon, yeah we could check if app-dark.svg exists (or appname-dark.svg, both should be possible). If not, invert the icon manually.

[juliushaertl]

Regarding the app icon, yeah we could check if app-dark.svg exists (or appname-dark.svg, both should be possible). If not, invert the icon manually.

At the moment, every navigation item is created with the complete path to the app icon, so there is no automatic matching on app.svg or something like that. So i think for now I'll just go with inverting the icon and we can discuss about adding dark icons later. This way we can also keep up compatibility to existing apps. I'll prepare a PR for that.

[jancborchardt]

Really cool! Looking forward to the PR :)

[jancborchardt]

@juliushaertl btw, I just saw you’re based in Würzburg. Do you want to join our hackweek in Stuttgart next week? See https://nextcloud.com/invitation-to-our-hackweek-in-stuttgart/ – would be cool to have you! :)

[juliushaertl]

@jancborchardt oh nice. I'll try to make it possible.

[juliushaertl]

closed with #627 backport to stable10 at #665

[Bugsbane]

Actually, I take back my previous suggestion, as thinking about it, making the menu darker than the background, would actually just focus the user on the background - the opposite of what we want. That said, I still feel that putting a white rectangle, on a white rectangle - even with a shadow - still isn't making the users main focus stand out to the user as easily as we could be making it.

What about if when the user opens either menu, it still has the white background as it does now, @jancborchardt but we subtly (I'm talking 3-5% opacity, here) dim the page underneath the menu (ie everything but the header bar/notifications). This would go away when the menu closed.

I'm thinking just enough that it isn't even really consciously noticed, but enough to draw the users eye to the slightly brighter element - ie the menu. Eg:

[jancborchardt]

@Bugsbane changing the background of the whole page from white to something else will achieve exactly the opposite of what you want. It will direct attention away from the menu which just opened directly where the cursor (and your eye) is, and instead basically flash the whole screen.