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 #33810 (comment)

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 => Theming: compute the primary color based on the background image #34560
• Optionally people could set this in the settings via a color picker, but this needs manual work. Ref settings PR by @GretaD @Pytal at Move background settings from dashboard app to Appearance and accessibility settings #33733 (If we have the automatic color sourcing from the image, ideally we do not need this) => (Custom plain background color) Use default system primary #34437 => Theming: compute the primary color based on the background image #34560 (comment)
• The default backgrounds can also have default primary colors associated with them (see list below): Use color preset of shipped background as primary color #34298

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. => Theming: An admin should be able to disable account-specific customization completely #34561

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

[Pytal]

As a user this would be much simpler and less of a footgun by not having a custom color picker and instead just picking the background which automatically chooses the primary color resulting in a background and color combination that never conflict, what do you think @jancborchardt?

Color presets added in #34272

[szaimen]

As a user this would be much simpler and less of a footgun by not having a custom color picker and instead just picking the background which automatically chooses the primary color resulting in a background and color combination that never conflict, what do you think @jancborchardt?

Color presets added in #34272

Makes sense! But what abour custom backgrounds?

[szaimen]

ping @jancborchardt

[jancborchardt]

Yes, the default presets for the default backgrounds are good, thanks @Pytal! :)

As mentioned in the post, it would still be great if a color picker shows up when you load a custom image (does not need to show for the default pictures as the colors are good).

And in the future, we can get the color automatically from custom images too – or if it's easier we do that directly. Then no footgun there too. ;)

[Pytal]

New color presets used in #34298

[nickvergessen]

Please note/adjust tertiary-on-primary in the vue library accordingly as well.
The name might not be matching anymore but it is only used for buttons that are added in the top bar, e.g. in Talk to open the sidebar.

[Tealk]

Does the following problem also apply here?

A separate background, the upper edge is bright
Theme Color #078D4E

Unfortunately I don't know how to get the navigation dark like it is with some of the preinstalled background images.

[Pytal]

Rewrite of admin theming in #34359

[Pytal]

Using dark navigation icons for custom backgrounds would be a separate issue @Tealk, feel free to open a new issue

[PVince81]

• BUG: [Bug]: cachebuster value rising infinitely  #34457

[PVince81]

• issue: cache buster needs to be user specific: Separate backend admin and user theming #34472

[PVince81]

• bug: [Bug]: NC25 not working with disabled Theming app #34338

[skjnldsv]

Fixed now I guess with the various PR and the last #34576
Closing as there is individual tickets for the extra points