upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-04-22 06:37:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 54
nextcloud/apps/theming
History
Ferdinand Thiessen de938bb401
feat(theming): 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 set,
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).

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
2024-05-21 20:36:21 +02:00
..
appinfo feat(branchoff): Bump versions and requirements in apps 2024-03-28 11:26:18 +01:00
composer chore: Remove old theming migration steps as they are only needed once 2024-02-14 11:13:06 +01:00
css feat(theming): Separate background and primary color 2024-05-21 20:36:21 +02:00
fonts Update opendyslexia 2022-10-01 16:29:36 +02:00
img fix(theming): Add adjusted color versions of default background for better app-menu contrast 2023-12-21 16:01:34 +01:00
js Purge unused legacy code and drop 3rdparty jscolor dependency 2022-10-28 00:18:47 +00:00
l10n Fix(l10n): Update translations from Transifex 2024-05-09 00:20:03 +00:00
lib feat(theming): Separate background and primary color 2024-05-21 20:36:21 +02:00
src fix(theming): better background and UI color change description 2024-05-02 16:46:20 +02:00
templates Rewrite admin theming in Vue 2022-10-28 00:18:47 +00:00
tests fix: Apply new coding standard to all files 2024-04-02 14:16:21 +02:00
.l10nignore Update .l10nignore for apps to exclude bundled JS files 2020-09-15 12:28:43 +02:00
openapi.json chore(deps): Update openapi-extractor 2024-04-08 20:09:24 +02:00
README.md Add distraction free backgrounds for Nextcloud 26 2023-03-03 17:55:19 +09:00

README.md

Theming

Background picture requirements

A reference to why it was very difficult to actually find good background pictures – there are quite some requirements when it comes to picking:

  • It needs to be an exceptionally good photo of course – since when chosen, people will see it every day.
  • We need to have a good balance of different motives, e.g. not too many landscape pics.
  • Same for a good balance of different colors.
  • The photo needs to work as a background. Photos with objects focused in the middle don’t really work as they will be overlapped by the widgets and content anyway.
  • Especially the top part cannot have too much differing contrast, as then it’s not possible to see the navigation icons.
  • Especially the top part should be either dark-ish or light-ish, but not a shade exactly inbetween because then contrast can neither be achieved with light nor dark icons.
  • We serve the pictures at 4k resolution and most of the selected images are also available in 6k or higher so it is future-proof.
  • For the search of course we had to limit to CC0, CC By and CC By-Sa. Only CC0 would have been practically impossible cause there’s just not so many good ones which fit.
  • Good pages to find photos are StockSnap, Wikimedia Commons, Openverse and Flickr (with license "commercial use & mods allowed"), sorting by interesting or downloads. Most others like Unsplash, Pexels, Pixabay, etc. meanwhile have a non-standard license.

Background picture technicals

  • All backgrounds are sized to maximum 3840px width (4K resolution).
  • To ensure quick loading times, the image needs to be compressed, ideally to around 1 MB or less. E.g. via 90–95% quality in GIMP export. We could also explore using newer formats.
  • Previews are sized to 352px width (min height 192px), which is double of the current picker grid size so it looks nice on high-res displays. Quality is also set to around 90% at export.

Background picture credits

In img/background/: