All theming issues still to be fixed

[jancborchardt]

For convenience and easier overview in one single issue. If there are individual issues, we can link them here. cc @nextcloud/designers

• favicons need to be adjusted. Ideally just automatically generate it: square with rounded corners colored with the chosen color, overlayed with the logo. Add dynamic icon creation #840
• background color of the custom favicons used in apps (Mail, Calendar, Contacts) needs to be adjusted based on the chosen color. This actually needs to be fixed for Nextcloud itself too. Add dynamic icon creation #840
• ideally adjust the color of the folder icons based on the chosen color. @juliushaertl said this is possible with CSS but won’t work in IE/Edge. Theming: coloring of folders and log in background #378 & Add dynamic icon creation #840
• primary action button color used for buttons of installation, file chooser, profile picture picker etc should be adjusted to the chosen color. Theming: Fix missing color usage #771
• update page doesn’t use the theme values and images Update page doen't get themed #835
• notifications app icon in top right (header) is still white for bright header colors Theming support for apps #819
• logo gets stretched on Firefox if the aspect ratio is not correct Fix theme logo position and shape #525
• colorize checkboxes depending on theming color Colorize checkboxes depending on theming color #415

In the Theming admin settings:

• show a preview of the log in image for feedback that it’s different Theming app: preview for log in background image #217 Theming: Add preview and hide undo buttons #770
• for the input fields, only show the reset button when the respective field is focused. Theming: Add preview and hide undo buttons #770

In general we need to take care that stuff still is nicely visible when a light color such as white is chosen. This goes especially for the favicons, action button etc. In this case we should either go for a standard grey (not ideal) or just leave the default blue.

[jancborchardt]

cc @nextcloud/theming I thought this would be nice as an overview what we still need to do. :) Everyone is welcome to get involved!

[savely-krasovsky]

@jancborchardt, as additional point you can add background tinting.

[oparoz]

@Lord-Protector Are you referring to the login page?

[savely-krasovsky]

@oparoz yes.

About light colors: I think we can simply restrict to use very light colors. Here we can again use HSV-magic. Where hue and saturation can be any, but brightness must be less than 60, for example.

[jancborchardt]

Added a new item app update page doesn’t use the theme values and images. Hope that’s possible? cc @LukasReschke @juliushaertl

[juliusknorr]

@jancborchardt what exactly is meant by app update page?

[jancborchardt]

@juliushaertl you can view it by setting the verson in the config/config.php down one number (the rightmost number).

That will trigger an update. It’s the general update page, not app update page – my mistake. :)

[jancborchardt]

Btw I found another thing which also occurs in stable10: notifications app icon in top right (header) is still white for bright header colors. cc @nickvergessen for Notifications.
Maybe there we need to invert, but if possible leave the red circle red cause that’s for notifications. Otherwise we could make it monochrome.

[janis91]

During creating my own nextcloud app last weeks a few questions came up to me:

1. The color picker on the admin settings page definitely changes the text color depending on the brightness of the background color. Is it planned to change the standard color also (eg. for the header-bar), according to this (i think) good automatic behavior of the color picker?
2. Is it possible to get the colors from any css class or is there any other trick to get the actual theme easily adopted for my app? maybe something like the following:
   <div class="myOwnClass ncThemeBackgroundColor ncThemeColor">Text in themed color and with themed background color. All other styles come from myOwnClass</div>

[juliusknorr]

The color picker on the admin settings page definitely changes the text color depending on the brightness of the background color. Is it planned to change the standard color also (eg. for the header-bar), according to this (i think) good automatic behavior of the color picker?

This is already implemented, on bright colors, the text in the header bar will switch to dark.

Is it possible to get the colors from any css class or is there any other trick to get the actual theme easily adopted for my app?

Good point, by now you could use dependency injection to inject the Template class to your controller and use getMailHeaderColor() to get the themed color value. But i'll add that to the todo list. ;)

[janis91]

This is already implemented, on bright colors, the text in the header bar will switch to dark.

Which nc version are you talking about? because on 9.0.53 it is not working for me.
Thx for the hint for the Template class...

[juliusknorr]

@janis91 right, this is available in NC 10, see #412 for reference.

[juliusknorr]

@janis91 btw. we have some enhancements for apps regarding the theming app merged in #833

[janis91]

Amazing!

[jancborchardt]

(BTW, @janis91 I saw you are based in Stuttgart, you might be interested in the planned meetup :) https://help.nextcloud.com/t/interesse-an-einem-meetup-im-raum-stuttgart/2115

[janis91]

@jancborchardt thanks for the hint. I am definitely interested!

[stephanedupont]

I don't know if it's the right place to post this, or if I should have made a new issue, but about the theme login image: it's really a nice feature, but shouldn't there be an option to display a plain color background instead of being force to display an image?

[MorrisJobke]

All the remaining items are part of the 11 milestone.

[juliusknorr]

@stephanedupont I like the idea, can you open a seperate issue for further discussion?

[stephanedupont]

@juliushaertl Thank you, here it is: #1414

[juliusknorr]

Finally merged #840, so this is fixed.