feat(theming): Allow shipped backgrounds to have a dark variant

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

.reuse/dep5

@@ -239,6 +239,10 @@ Files: cypress/fixtures/image.jpg
 Copyright: 2019 Tom Gainor <https://unsplash.com/@its_tgain> <https://unsplash.com/photos/mountain-cliff-under-starry-night-KidY3t8O4PE>
 License: LicenseRef-Unsplash
 
+Files: apps/theming/img/background/jenna-kim-the-globe.webp apps/theming/img/background/jenna-kim-the-globe-dark.webp
+Copyright: 2024 Nextcloud GmbH
+License: CC-BY-SA-4.0
+
 Files: apps/theming/img/background/anatoly-mikhaltsov-butterfly-wing-scale.jpg apps/theming/img/background/preview/anatoly-mikhaltsov-butterfly-wing-scale.jpg
 Copyright: 2015 Anatoly Mikhaltsov <https://commons.wikimedia.org/wiki/File:%D0%A7%D0%B5%D1%88%D1%83%D0%B9%D0%BA%D0%B8_%D0%BA%D1%80%D1%8B%D0%BB%D0%B0_%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B8.jpg>
 License: CC-BY-SA-4.0

apps/theming/README.md

@@ -29,8 +29,9 @@ A reference to why it was very difficult to actually find good background pictur
 
 In `img/background/`:
 
-- Default background: [Clouds (Kamil Porembiński, CC BY-SA)](https://www.flickr.com/photos/paszczak000/8715851521/) – original 4k, color modified and sky color changed to Nextcloud blue.
-- Default dark mode background: [Pedra azul milky way (Eduardo Neves, CC BY-SA)](https://commons.wikimedia.org/wiki/File:Pedra_Azul_Milky_Way.jpg) – original 5k.
+- Default background: [Globe (Jenna Kim - Nextcloud GmbH, C-BY-SA-4.0)](https://nextcloud.com/trademarks/) - orginal 4k
+- [Clouds (Kamil Porembiński, CC BY-SA)](https://www.flickr.com/photos/paszczak000/8715851521/) – original 4k, color modified and sky color changed to Nextcloud blue.
+- [Pedra azul milky way (Eduardo Neves, CC BY-SA)](https://commons.wikimedia.org/wiki/File:Pedra_Azul_Milky_Way.jpg) – original 5k.
 - [Soft floral (Hannah MacLean, CC0)](https://stocksnap.io/photo/soft-floral-XOYWCCW5PA) – original 5.5k.
 - [Morning fog (Ted Moravec, Public Domain)](https://flickr.com/photos/tmoravec/52392410261) – original 3k.
 - [Underwater ocean (Stefanus Martanto Setyo Husodo, CC0)](https://stocksnap.io/photo/underwater-ocean-TJA9LBH4WS) – original 5k.

apps/theming/css/default.css

@@ -99,5 +99,5 @@
   --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
   --color-background-plain: #00679e;
   --color-background-plain-text: #ffffff;
-  --image-background: url('/apps/theming/img/background/kamil-porembinski-clouds.jpg');
+  --image-background: url('/apps/theming/img/background/jenna-kim-the-globe.webp');
 }

apps/theming/lib/ImageManager.php

@@ -42,6 +42,9 @@ class ImageManager {
 		$cacheBusterCounter = $this->config->getAppValue(Application::APP_ID, 'cachebuster', '0');
 		if ($this->hasImage($key)) {
 			return $this->urlGenerator->linkToRoute('theming.Theming.getImage', [ 'key' => $key ]) . '?v=' . $cacheBusterCounter;
+		} elseif ($key === 'backgroundDark' && $this->hasImage('background')) {
+			// Fall back to light variant
+			return $this->urlGenerator->linkToRoute('theming.Theming.getImage', [ 'key' => 'background' ]) . '?v=' . $cacheBusterCounter;
 		}
 
 		switch ($key) {
@@ -49,11 +52,16 @@ class ImageManager {
 			case 'logoheader':
 			case 'favicon':
 				return $this->urlGenerator->imagePath('core', 'logo/logo.png') . '?v=' . $cacheBusterCounter;
+			case 'backgroundDark':
 			case 'background':
 				// Removing the background defines its mime as 'backgroundColor'
 				$mimeSetting = $this->config->getAppValue('theming', 'backgroundMime', '');
 				if ($mimeSetting !== 'backgroundColor') {
-					return $this->urlGenerator->linkTo(Application::APP_ID, 'img/background/' . BackgroundService::DEFAULT_BACKGROUND_IMAGE);
+					$image = BackgroundService::DEFAULT_BACKGROUND_IMAGE;
+					if ($key === 'backgroundDark') {
+						$image = BackgroundService::SHIPPED_BACKGROUNDS[$image]['dark_variant'] ?? $image;
+					}
+					return $this->urlGenerator->linkTo(Application::APP_ID, "img/background/$image");
 				}
 		}
 		return '';

apps/theming/lib/Service/BackgroundService.php

@@ -44,7 +44,7 @@ class BackgroundService {
 	 */
 	public const BACKGROUND_COLOR = 'color';
 
-	public const DEFAULT_BACKGROUND_IMAGE = 'kamil-porembinski-clouds.jpg';
+	public const DEFAULT_BACKGROUND_IMAGE = 'jenna-kim-the-globe.webp';
 
 	/**
 	 * 'attribution': Name, artist and license
@@ -54,6 +54,21 @@ class BackgroundService {
 	 * 'primary_color': Recommended primary color for this theme / image
 	 */
 	public const SHIPPED_BACKGROUNDS = [
+		'jenna-kim-the-globe.webp' => [
+			'attribution' => 'Globe (Jenna Kim - Nextcloud GmbH, CC-BY-SA-4.0)',
+			'description' => 'Background picture of white clouds on in front of a blue sky',
+			'attribution_url' => 'https://nextcloud.com/trademarks/',
+			'dark_variant' => 'jenna-kim-the-globe-dark.webp',
+			'background_color' => self::DEFAULT_BACKGROUND_COLOR,
+			'primary_color' => self::DEFAULT_COLOR,
+		],
+		'kamil-porembinski-clouds.jpg' => [
+			'attribution' => 'Clouds (Kamil Porembiński, CC BY-SA)',
+			'description' => 'Background picture of white clouds on in front of a blue sky',
+			'attribution_url' => 'https://www.flickr.com/photos/paszczak000/8715851521/',
+			'background_color' => self::DEFAULT_BACKGROUND_COLOR,
+			'primary_color' => self::DEFAULT_COLOR,
+		],
 		'hannah-maclean-soft-floral.jpg' => [
 			'attribution' => 'Soft floral (Hannah MacLean, CC0)',
 			'description' => 'Abstract background picture in yellow and white color whith a flower on it',
@@ -138,13 +153,6 @@ class BackgroundService {
 			'background_color' => '#333f47',
 			'primary_color' => '#4f6071',
 		],
-		'kamil-porembinski-clouds.jpg' => [
-			'attribution' => 'Clouds (Kamil Porembiński, CC BY-SA)',
-			'description' => 'Background picture of white clouds on in front of a blue sky',
-			'attribution_url' => 'https://www.flickr.com/photos/paszczak000/8715851521/',
-			'background_color' => self::DEFAULT_BACKGROUND_COLOR,
-			'primary_color' => self::DEFAULT_COLOR,
-		],
 		'bernard-spragg-new-zealand-fern.jpg' => [
 			'attribution' => 'New zealand fern (Bernard Spragg, CC0)',
 			'description' => 'Abstract background picture of fern leafes',

apps/theming/lib/Themes/CommonThemeTrait.php

@@ -17,6 +17,8 @@ trait CommonThemeTrait {
 	public Util $util;
 	public ThemingDefaults $themingDefaults;
 
+	protected bool $isDarkVariant = false;
+
 	/**
 	 * Generate primary-related variables
 	 * This is shared between multiple themes because colorMainBackground and colorMainText
@@ -87,7 +89,7 @@ trait CommonThemeTrait {
 				$variables["--image-$image"] = "url('" . $imageUrl . "')";
 			} elseif ($image === 'background') {
 				// Apply default background if nothing is configured
-				$variables['--image-background'] = "url('" . $this->themingDefaults->getBackground() . "')";
+				$variables['--image-background'] = "url('" . $this->themingDefaults->getBackground($this->isDarkVariant) . "')";
 			}
 		}
 
@@ -139,6 +141,10 @@ trait CommonThemeTrait {
 
 			// The user picked a shipped background
 			if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage])) {
+				$shippedBackground = BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage];
+				if ($this->isDarkVariant && isset($shippedBackground['dark_variant'])) {
+					$backgroundImage = $shippedBackground['dark_variant'];
+				}
 				$variables['--image-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "img/background/$backgroundImage") . "')";
 			}
 

apps/theming/lib/Themes/DarkTheme.php

@@ -11,6 +11,8 @@ use OCA\Theming\ITheme;
 
 class DarkTheme extends DefaultTheme implements ITheme {
 
+	protected bool $isDarkVariant = true;
+
 	public function getId(): string {
 		return 'dark';
 	}

apps/theming/lib/ThemingDefaults.php

@@ -284,10 +284,11 @@ class ThemingDefaults extends \OC_Defaults {
 	/**
 	 * Themed background image url
 	 *
+	 * @param bool $darkVariant if the dark variant (if available) of the background should be used
 	 * @return string
 	 */
-	public function getBackground(): string {
-		return $this->imageManager->getImageUrl('background');
+	public function getBackground(bool $darkVariant = false): string {
+		return $this->imageManager->getImageUrl('background' . ($darkVariant ? 'Dark' : ''));
 	}
 
 	/**

cypress/e2e/theming/themingUtils.ts

@@ -5,7 +5,7 @@
 import { colord } from 'colord'
 
 export const defaultPrimary = '#00679e'
-export const defaultBackground = 'kamil-porembinski-clouds.jpg'
+export const defaultBackground = 'jenna-kim-the-globe.webp'
 
 /**
  * Check if a CSS variable is set to a specific color