Repository navigation
Own background image conflicts with admin theming primary color #33925
Description
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):
#a53c17anatoly-mikhaltsov-butterfly-wing-scale.jpg#316b26bernard-spragg-new-zealand-fern.jpg#56633dbernie-cetonia-aurata-take-off-composition.jpg#9c4236dejan-krsmanovic-ribbed-red-metal.jpg#4f6071eduardo-neves-pedra-azul.jpg#396475european-space-agency-barents-bloom.jpg#98415ahannes-fritz-flippity-floppity.jpg#845334hannes-fritz-roulette.jpg#4f6071hannes-fritz-sea-spray.jpg#0082c9kamil-porembinski-clouds.jpg (the actual accessible color here would be#00639a)#7f5700lali-masriera-yellow-bricks.jpg#005ac1nasa-waxing-crescent-moon.jpg#7b4e7erawpixel-pink-tapioca-bubbles.jpg#6a2af4tommy-chau-already.jpg#7f4f70tommy-chau-lion-rock-hill.jpg
Activity
Pytal commentedon Sep 27, 2022
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 commentedon Sep 27, 2022
Makes sense! But what abour custom backgrounds?
4 remaining items
nickvergessen commentedon Sep 29, 2022
Please note/adjust
tertiary-on-primaryin 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 commentedon Oct 10, 2022
Does the following problem also apply here?
A separate background, the upper edge is bright
Theme Color
#078D4EUnfortunately I don't know how to get the navigation dark like it is with some of the preinstalled background images.
Pytal commentedon Oct 11, 2022
Rewrite of admin theming in #34359
Pytal commentedon Oct 12, 2022
Using dark navigation icons for custom backgrounds would be a separate issue @Tealk, feel free to open a new issue
PVince81 commentedon Oct 12, 2022
PVince81 commentedon Oct 14, 2022
PVince81 commentedon Oct 14, 2022
skjnldsv commentedon Oct 21, 2022
Fixed now I guess with the various PR and the last #34576
Closing as there is individual tickets for the extra points