nextcloud-server/apps/theming
nfebe 5acf36f17d fix(theming): Correctly generate CSS for font themes
Fixes a regression from dropping the SCSS compiler that broke
font themes like OpenDyslexic. The old code relied on the SCSS
compiler to automatically correct the order of the CSS rules,
ensuring the @font-face declaration was always valid.
The server now correctly generates the `@font-face` rule at
the top level of the stylesheet, fixing the previously invalid nested CSS.

Introduced in : f1448fcf07

Signed-off-by: nfebe <fenn25.fn@gmail.com>
2025-07-11 19:49:14 +07:00
..
appinfo fix: Use migration instead of repair step for restoring custom color 2024-09-10 17:51:27 +07:00
composer fix: Use migration instead of repair step for restoring custom color 2024-09-10 17:51:27 +07:00
css fix(css): refine css cleanup 2024-09-02 17:04:37 +07:00
fonts fix(a11y): Update OpenDyslexic from 0.920 to 2.001 2024-09-12 16:53:13 +07:00
img fix(theming): Use version with less color banding for dark variant 2024-07-25 16:58:12 +07:00
js chore: Add SPDX header 2024-05-31 10:38:47 +07:00
l10n fix(l10n): Update translations from Transifex 2025-07-05 00:12:11 +07:00
lib fix(theming): Correctly generate CSS for font themes 2025-07-11 19:49:14 +07:00
src fix: Increase background and primary color debounce time 2025-01-29 14:45:15 +07:00
templates chore: Add SPDX header 2024-05-31 10:38:47 +07:00
tests fix(theming): Instead of expecting a warning handle it properly 2025-05-20 21:39:02 +07:00
.l10nignore chore: Add SPDX header 2024-05-31 10:38:47 +07:00
README.md feat(theming): Allow shipped backgrounds to have a dark variant 2024-07-12 13:00:07 +07:00
openapi.json chore(deps): Update openapi-extractor to v1.3.0 2025-01-06 14:30:40 +07:00
openapi.json.license chore: Add SPDX header 2024-05-31 10:38:47 +07: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 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/: