Merge pull request #33610 from nextcloud/enh/background-blur-vars

Author: skjnldsv

apps/dashboard/src/DashboardApp.vue

@@ -170,8 +170,9 @@ export default {
 				|| this.background.match(/#[0-9A-Fa-f]{6}/g)) {
 				return null
 			}
+
 			return {
-				backgroundImage: `url(${this.backgroundImage})`,
+				backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url(${this.backgroundImage})`,
 			}
 		},
 
@@ -426,8 +427,6 @@ export default {
 	background-repeat: no-repeat;
 	background-attachment: fixed;
 	background-color: var(--color-primary);
-	--color-background-translucent: rgba(var(--color-main-background-rgb), 0.8);
-	--background-blur: blur(10px);
 
 	> h2 {
 		color: var(--color-primary-text);
@@ -453,9 +452,9 @@ export default {
 	width: 320px;
 	max-width: 100%;
 	margin: 16px;
-	background-color: var(--color-background-translucent);
-	-webkit-backdrop-filter: var(--background-blur);
-	backdrop-filter: var(--background-blur);
+	background-color: var(--color-main-background-blur);
+	-webkit-backdrop-filter: var(--filter-background-blur);
+	backdrop-filter: var(--filter-background-blur);
 	border-radius: var(--border-radius-large);
 
 	#body-user.theme--highcontrast & {
@@ -556,9 +555,9 @@ export default {
 .edit-panels,
 .statuses ::v-deep .action-item .action-item__menutoggle,
 .statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
-	background-color: var(--color-background-translucent);
-	-webkit-backdrop-filter: var(--background-blur);
-	backdrop-filter: var(--background-blur);
+	background-color: var(--color-main-background-blur);
+	-webkit-backdrop-filter: var(--filter-background-blur);
+	backdrop-filter: var(--filter-background-blur);
 	opacity: 1 !important;
 
 	&:hover,

apps/theming/css/default.css

@@ -2,6 +2,8 @@
   --color-main-background: #ffffff;
   --color-main-background-rgb: 255,255,255;
   --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
+  --color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
+  --filter-background-blur: blur(25px);
   --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
   --color-background-hover: #f5f5f5;
   --color-background-dark: #ededed;
@@ -59,4 +61,5 @@
   --primary-invert-if-bright: no;
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
+  --image-main-background: url('/core/img/app-background.jpg');
 }

apps/theming/lib/Themes/DefaultTheme.php

@@ -97,6 +97,8 @@ public function getCSSVariables(): array {
 			'--color-main-background' => $colorMainBackground,
 			'--color-main-background-rgb' => $colorMainBackgroundRGB,
 			'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)',
+			'--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)',
+			'--filter-background-blur' => 'blur(25px)',
 
 			// to use like this: background-image: linear-gradient(0, var('--gradient-main-background));
 			'--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%',
@@ -190,26 +192,30 @@ public function getCSSVariables(): array {
 			'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no',
 			'--background-invert-if-dark' => 'no',
 			'--background-invert-if-bright' => 'invert(100%)',
+
+			'--image-main-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')",
 		];
 
 		$backgroundDeleted = $this->config->getAppValue('theming', 'backgroundMime', '') === 'backgroundColor';
 		// If primary as background has been request or if we have a custom primary colour
 		// let's not define the background image
 		if ($backgroundDeleted || $hasCustomPrimaryColour) {
 			$variables["--image-background-plain"] = 'true';
-		} 
+		}
 
 		// Register image variables only if custom-defined
 		foreach(['logo', 'logoheader', 'favicon', 'background'] as $image) {
 			if ($this->imageManager->hasImage($image)) {
+				$imageUrl = $this->imageManager->getImageUrl($image);
 				if ($image === 'background') {
 					// If background deleted is set, ignoring variable
 					if ($backgroundDeleted) {
 						continue;
-					} 
+					}
 					$variables['--image-background-size'] = 'cover';
+					$variables['--image-main-background'] = "url('" . $imageUrl . "')";
 				}
-				$variables["--image-$image"] = "url('".$this->imageManager->getImageUrl($image)."')";
+				$variables["--image-$image"] = "url('" . $imageUrl . "')";
 			}
 		}
 

apps/theming/lib/Themes/HighContrastTheme.php

@@ -59,6 +59,9 @@ public function getCSSVariables(): array {
 		$variables['--color-background-dark'] = $this->util->darken($colorMainBackground, 30);
 		$variables['--color-background-darker'] = $this->util->darken($colorMainBackground, 30);
 
+		$variables['--color-main-background-blur'] = $colorMainBackground;
+		$variables['--filter-background-blur'] = 'none';
+
 		$variables['--color-placeholder-light'] = $this->util->darken($colorMainBackground, 30);
 		$variables['--color-placeholder-dark'] = $this->util->darken($colorMainBackground, 45);
 

apps/theming/tests/Themes/DefaultThemeTest.php

@@ -75,6 +75,13 @@ protected function setUp(): void {
 				return vsprintf($text, $parameters);
 			});
 
+		$this->urlGenerator
+			->expects($this->any())
+			->method('imagePath')
+			->willReturnCallback(function ($app = 'core', $filename = '') {
+				return "/$app/img/$filename";
+			});
+
 		$this->defaultTheme = new DefaultTheme(
 			$util,
 			$this->themingDefaults,