Dashboard: Fix dark mode, add background

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

4 files changed, 28 insertions, 5 deletions

diff --git a/apps/dashboard/README.md b/apps/dashboard/README.md
index 36c4dcfbaf5..9a423cbe006 100644
--- a/apps/dashboard/README.md
+++ b/apps/dashboard/README.md
@@ -1,3 +1,5 @@
 # Dashboard
 
-Picture credit: [Clouds by Kamil Porembiński](https://www.flickr.com/photos/paszczak000/8715851521/)
+Picture credit:
+- [Clouds by Kamil Porembiński](https://www.flickr.com/photos/paszczak000/8715851521/)
+- [Un beau soir dété by Tanguy Domenge](https://www.flickr.com/photos/148302424@N05/36591009215/)
diff --git a/apps/dashboard/img/flickr-148302424@N05-36591009215-mobile.jpg b/apps/dashboard/img/flickr-148302424@N05-36591009215-mobile.jpg
new file mode 100644
index 00000000000..e922e6ece3d
--- /dev/null
+++ b/apps/dashboard/img/flickr-148302424@N05-36591009215-mobile.jpg
diff --git a/apps/dashboard/img/flickr-148302424@N05-36591009215.jpg b/apps/dashboard/img/flickr-148302424@N05-36591009215.jpg
new file mode 100644
index 00000000000..81fe1d3362d
--- /dev/null
+++ b/apps/dashboard/img/flickr-148302424@N05-36591009215.jpg
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index a5fc1009976..0354c3ce915 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -249,18 +249,31 @@ export default {
 		width: 100%;
 		padding-bottom: 100px;
 
-		background-color: var(--color-primary);
-		background-image: url('/nextcloud/apps/dashboard/img/flickr-paszczak000-8715851521.jpg?v=1');
 		background-size: cover;
 		background-position: center center;
 		background-repeat: no-repeat;
 		background-attachment: fixed;
+
+		#body-user:not(.dark) & {
+			background-color: var(--color-primary);
+			background-image: url('/nextcloud/apps/dashboard/img/flickr-paszczak000-8715851521.jpg?v=1');
+		}
+
+		#body-user.dark & {
+			background-color: var(--color-main-background);
+			background-image: url('/nextcloud/apps/dashboard/img/flickr-148302424@N05-36591009215.jpg?v=1');
+		}
 	}
 
 	@media only screen and (max-width: var(--breakpoint-mobile)) {
-		body {
+		#body-user:not(.dark) #app-dashboard {
 			background-image: url('/nextcloud/apps/dashboard/img/flickr-paszczak000-8715851521-mobile.jpg?v=1');
 		}
+
+		#body-user.dark #app-dashboard {
+			background-color: var(--color-main-background);
+			background-image: url('/nextcloud/apps/dashboard/img/flickr-148302424@N05-36591009215-mobile.jpg?v=1');
+		}
 	}
 
 	h2 {
@@ -273,8 +286,12 @@ export default {
 
 	.statuses {
 		::v-deep #user-status-menu-item__subheader>button {
-			background-color: rgba(255, 255, 255, 0.8);
 			backdrop-filter: blur(10px);
+			background-color: rgba(255, 255, 255, 0.8);
+
+			#body-user.dark & {
+				background-color: rgba(24, 24, 24, 0.8);
+			}
 		}
 	}
 
@@ -297,6 +314,10 @@ export default {
 		backdrop-filter: blur(10px);
 		border-radius: var(--border-radius-large);
 
+		#body-user.dark & {
+			background-color: rgba(24, 24, 24, 0.8);
+		}
+
 		&.sortable-ghost {
 			 opacity: 0.1;
 		}