Own background image conflicts with admin theming primary color

[jancborchardt]

Problem

With the design update, you can have the strange state that the primary color picked by the admin is still present when you pick a different background image, resulting in e.g. red primary buttons when there is a green-ish background image.

@skjnldsv since we also talked about that in https://github.com/nextcloud/server/issues/33810#issuecomment-1238039878

Possible solution

For users People should be able to set their own design, background image including primary color. For that we can do several enhancements, any or all of these:

• Ideally the primary color is sourced automatically from the image, e.g. via https://www.the-art-of-web.com/php/extract-image-color/ or https://stackoverflow.com/questions/10290259/detect-main-colors-in-an-image-with-php
• Optionally people could set this in the settings via a color picker, but this needs manual work. Ref settings PR by @GretaD @Pytal at https://github.com/nextcloud/server/pull/33733 (If we have the automatic color sourcing from the image, ideally we do not need this)
• The default backgrounds can also have default primary colors associated with them (see list below)

For admins Ideally, the admin should be able to disable this account-specific customization completely, if they would like to keep their cloud on-brand. This would be a setting in "Theming" called "Allow people to personalize their background and color". By default, the customization is enabled of course.

Default The default image and color if nothing is customized by either admin or individual people remains:

• background (for logged in as well as logged out pages): kamil-porembinski-clouds.jpg
• color: Nextcloud blue #0082c9

cc @PVince81 @skjnldsv @karlitschek @AndyScherzinger

---

List of colors for default dashboard images (taken by putting the images through the Material Theme Builder):

• #a53c17 anatoly-mikhaltsov-butterfly-wing-scale.jpg
• #316b26 bernard-spragg-new-zealand-fern.jpg
• #56633d bernie-cetonia-aurata-take-off-composition.jpg
• #9c4236 dejan-krsmanovic-ribbed-red-metal.jpg
• #4f6071 eduardo-neves-pedra-azul.jpg
• #396475 european-space-agency-barents-bloom.jpg
• #98415a hannes-fritz-flippity-floppity.jpg
• #845334 hannes-fritz-roulette.jpg
• #4f6071 hannes-fritz-sea-spray.jpg
• #0082c9 kamil-porembinski-clouds.jpg (the actual accessible color here would be #00639a)
• #7f5700 lali-masriera-yellow-bricks.jpg
• #005ac1 nasa-waxing-crescent-moon.jpg
• #7b4e7e rawpixel-pink-tapioca-bubbles.jpg
• #6a2af4 tommy-chau-already.jpg
• #7f4f70 tommy-chau-lion-rock-hill.jpg