Dashboard: Fix dark mode, add background

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

diff --git a/apps/dashboard/README.md b/apps/dashboard/README.md
index 36c4dcfbaf5ed06e06100301a1ef5d8cd667e4dc..9a423cbe0067a458301ee336103c8d07f88579ba 100644 (file)
--- 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 (file)
index 0000000..e922e6e
Binary files /dev/null and b/apps/dashboard/img/flickr-148302424@N05-36591009215-mobile.jpg differ

diff --git a/apps/dashboard/img/flickr-148302424@N05-36591009215.jpg b/apps/dashboard/img/flickr-148302424@N05-36591009215.jpg
new file mode 100644 (file)
index 0000000..81fe1d3
Binary files /dev/null and b/apps/dashboard/img/flickr-148302424@N05-36591009215.jpg differ

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index a5fc10099761103636bd67d1a6e278513b9b8114..0354c3ce91540143f8e9d8c0021da4f88715c74c 100644 (file)
--- 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;
                }