Dashboard: Adjust for dark and high contrast themes

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

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 12dfaa763eadbfe5b981a5ab8ef39345c4ae32ca..c77eba7ca65acc8dd149752b59a4a69f33d30bd0 100644 (file)
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -299,13 +299,18 @@ export default {
                background-position: center center;
                background-repeat: no-repeat;
                background-attachment: fixed;
+               background-color: var(--color-primary);
+               --color-background-translucent: rgba(255, 255, 255, 0.8);
+               --background-blur: blur(10px);
 
-               #body-user:not(.dark) & {
-                       background-color: var(--color-primary);
+               #body-user.theme--dark & {
+                       background-color: var(--color-main-background);
+                       --color-background-translucent: rgba(24, 24, 24, 0.8);
                }
 
-               #body-user.dark & {
+               #body-user.theme--highcontrast & {
                        background-color: var(--color-main-background);
+                       --color-background-translucent: var(--color-main-background);
                }
        }
 
@@ -317,17 +322,6 @@ export default {
                padding: 120px 16px 0px;
        }
 
-       .statuses {
-               ::v-deep #user-status-menu-item__subheader>button {
-                       backdrop-filter: blur(10px);
-                       background-color: rgba(255, 255, 255, 0.8);
-
-                       #body-user.dark & {
-                               background-color: rgba(24, 24, 24, 0.8);
-                       }
-               }
-       }
-
        .panels {
                width: auto;
                margin: auto;
@@ -343,14 +337,10 @@ export default {
                width: 320px;
                max-width: 100%;
                margin: 16px;
-               background-color: rgba(255, 255, 255, 0.8);
-               backdrop-filter: blur(10px);
+               background-color: var(--color-background-translucent);
+               backdrop-filter: var(--background-blur);
                border-radius: var(--border-radius-large);
 
-               #body-user.dark & {
-                       background-color: rgba(24, 24, 24, 0.8);
-               }
-
                &.sortable-ghost {
                         opacity: 0.1;
                }
@@ -417,15 +407,19 @@ export default {
                background-position: 16px center;
                padding: 12px 16px;
                padding-left: 36px;
-               background-color: var(--color-main-background);
                border-radius: var(--border-radius-pill);
                max-width: 200px;
                opacity: 1;
                text-align: center;
+       }
+
+       .edit-panels,
+       .statuses ::v-deep #user-status-menu-item__subheader>button {
+               background-color: var(--color-background-translucent);
+               backdrop-filter: var(--background-blur);
 
-               &:focus,
-               &:hover {
-                       opacity: 1;
+               &:hover,
+               &:focus {
                        background-color: var(--color-background-hover);
                }
        }