Switch colors to 3 accent colors

juliusknorr commented 2 years ago

We should use individual accent colors per application which would be based on the color of the file type icons

juliusknorr commented 2 years ago

@jancborchardt Should we use the accent color for all places where the primary color is being used or shall we still keep the Nextcloud blue (theming color) bar in the top or other elements for example?

jancborchardt commented 2 years ago

@juliushaertl I would say to use it everywhere where the primary color is used in Office right now:

color bar in compact mode
bar below active menu item, and highlights inside the menu
light background of active toolbar item
save icon dot I guess too?
probably more I forgot :D

What we should not change / what should stay default:

The logo should stay Nextcloud blue as it would look weird in green and orange. ;)
confirmation buttons in dialogs

We also need to make sure that it’s accessible. Here are the colors of the current favicons and proposed better colors based on the color contrast checker at https://webaim.org/resources/contrastchecker/ (to work even with white text on top on AA)

x-office-document: #49abea → #157cbc
x-office-spreadsheet: #9abd4e → #647f2f
x-office-presentation: #f0965f → #bf5412
x-office-drawing: #ebc94a → #8e7310
application-pdf: #dc5047 → #d83c31

juliusknorr commented 1 year ago

Currently we only pass over already generated color values from the theming app, but we would need to then do those calculations (base on dark/light theme and the mixing with the background color ourselves). Sadly this is only available in the backend, and we'd probably need a way to do this in javascript in https://github.com/nextcloud/richdocuments/blob/3eece5e50574d088975800776fafd2ded0aacf1e/src/helpers/coolParameters.js#L48-L64

ananyak19 commented 1 year ago

Hey is this available? Can I work on this issue?

nextcloud / richdocuments

Switch colors to 3 accent colors #2404