Merge pull request #10898 from nextcloud/feature/10684/default-logo-color-theme-colors

Switches the default logo color depending on the primary color

1 files changed, 27 insertions, 6 deletions

diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index f12ce4d907f..e2cd8fb11ee 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -7,6 +7,17 @@
 	@return (0.2126 * $-local-red  + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
 }
 
+$has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
+$invert: luma($color-primary) > 0.6;
+
+@if ($has-custom-logo == false) {
+	@if ($invert) {
+		$image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true));
+	} @else {
+		$image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true));
+	}
+}
+
 .nc-theming-main-background {
 	background-color: $color-primary;
 }
@@ -19,7 +30,7 @@
 	color: $color-primary-text;
 }
 
-@if (luma($color-primary) > 0.6) {
+@if ($invert) {
 	#appmenu:not(.inverted) svg {
 		filter: invert(1);
 	}
@@ -98,19 +109,29 @@
 	background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important;
 }
 
+#theming-preview-logo,
+#header .logo {
+	background-image: $image-logo;
+}
+
 /* override styles for login screen in guest.css */
-@if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
+@if ($has-custom-logo) {
+	// custom logo
 	#theming-preview-logo,
 	#header .logo {
-		background-image: $image-logo;
 		background-size: contain;
 	}
+
 	#body-login #header .logo {
 		margin-bottom: 22px;
 	}
 } @else {
-	#theming-preview-logo {
-		background-image: $image-logo;
+	// default logo
+	@if ($invert) {
+		#theming-preview-logo,
+		#header .logo {
+			opacity: .6;
+		}
 	}
 }
 
@@ -156,7 +177,7 @@ input.primary,
 	color: $color-primary-text;
 }
 
-@if (luma($color-primary) > 0.6) {
+@if ($invert) {
 	#body-login #submit-wrapper .icon-confirm-white {
 		background-image: url('../../../core/img/actions/confirm.svg');
 	}