You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
nextcloud/apps/theming
Ferdinand Thiessen 32ac5e7af8
fix(theming): Make sure the footer is hidden if not content is rendered
Previously the footer was empty, but the backdrop was still shown.
This hides the footer if no text content was defined.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
7 months ago
..
__tests__ fix(theming): Ensure all text colors have enough contrast for accessibility 7 months ago
appinfo feat(theming): Allow to configure default apps and app order in frontend settings 8 months ago
composer theming: Add OpenAPI spec 11 months ago
css fix(theming): Make changes on primary color less invasiv 7 months ago
fonts Update opendyslexia 2 years ago
img theming: Revert broken SVG optimization from f2afcc in default-source.svg 9 months ago
js Purge unused legacy code and drop 3rdparty jscolor dependency 2 years ago
l10n Fix(l10n): Update translations from Transifex 7 months ago
lib fix(theming): Make sure the footer is hidden if not content is rendered 7 months ago
src fix(theming): Add accessible information for screen readers to the app order selector 7 months ago
templates Rewrite admin theming in Vue 2 years ago
tests fix(theming): Ensure all text colors have enough contrast for accessibility 7 months ago
.l10nignore Update .l10nignore for apps to exclude bundled JS files 4 years ago
README.md Add distraction free backgrounds for Nextcloud 26 1 year ago
openapi.json Fix OCS-APIRequest header for OpenAPI 8 months ago

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 dont 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 its 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 theres 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 9095% 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/: