theming: Separate primary and background colors - fix the header menu colors

[susnux]

• Fixes Topbar icons and text are controlled by wrong variable #42954
• Fixes The header icons are not visible when choosing a light background #35482
• Fixes [Bug]: dark icon colore #44325

Summary

This will fix one of the main issues we face with our theming: Currently primary color used to highlight elements is mixed and directly connected to the background color.

So the goal is to have two different colors:

1. primary to highlight elements - meaning used as an accent color
2. background to be used as background on the body or fallback if images failes to load, moreover this will be used to calculate the header menu text color.

To make this possible this PR is sadly bigger then I hoped, it contains following changes:

1. Add background / primary color for custom images
   Previously we had a primary color predefined for every shipped background image, but not for custom images so that users had to select a color manually. As preparation for the other steps I added a function to automatically calculate the mean color of the image so it can be used as the primary / background color.
2. Separate background and primary color
   While the primary color is intended to highlight elements, it can not always be used as the background color. So now primary is independent from background a user sets, the background color is, if not set directly, calculated as the mean color of the background image. That color is then used as a fallback if the background image could not be loaded and for calculating the color of the text used on the app menu and dashboard (they render directly on the background).
3. Adjust dashboard and the header menu to use that new color instead of primary
4. Adjust theming setting to configure primary and background color
5. Fixed our provided apps that have header menus to use color variables instead of the infamous color-filter.

TODO

• Tests
• How to implement migration? IRepairStep? All users need to copy background_color to primary_color user value

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[github-advanced-security]

Psalm found more than 20 potential problems in the proposed changes. Check the Files changed tab for more details.

[jancborchardt]

@susnux in which cases was the current state specifically a problem? :) I was even thinking we can phase out color-primary-element in favor of just color-primary – since for our default that is now unified to the darker blue.

I really like your point 1) for example so things are automatically generated
4) though seems to make stuff more complex, not sure we need the separation. But that's why I'm asking. :) cc @juliushaertl

[nickvergessen]

I was even thinking we can phase out color-primary-element in favor of just color-primary – since for our default that is now unified to the darker blue.

Please keep our clients in mind that rely on these values and need a non-manipulated primary color, so they can do their own math using material design on Android and ... on iOS to generate colors matching their standards.

[juliushaertl]

4. though seems to make stuff more complex, not sure we need the separation. But that's why I'm asking

I think it would be good to have this separation, especially for cases where people disable user background theming (like in corporate environments) and then want to have a static background image (+color). Icon inversion in the header menu needs to be based on the background color or image and not the primary element color so splitting that makes a lot of sense to me.

[jancborchardt]

@nickvergessen @juliushaertl right, if you say it makes sense let’s go with it. :) I can’t judge the code though.

[szaimen]

🎉🎉🎉🎉🎉🎉🎉🎉