Dark theme improvements

diff --git a/src/App.vue b/src/App.vue
index 0f137b9eeb809d73c1d8014d534315363ab8590a..c47b5a9a40a10d8b7a9c6e9f7e426fc9d9877045 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -159,7 +159,9 @@ export default {
     }
     this.config = merge(defaults, config);
     this.services = this.config.services;
-    document.title = this.config.documentTitle || `${this.config.title} | ${this.config.subtitle}`;
+    document.title =
+      this.config.documentTitle ||
+      `${this.config.title} | ${this.config.subtitle}`;
     if (this.config.stylesheet) {
       let stylesheet = "";
       for (const file of this.config.stylesheet) {

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 43d762980bad9dcabb2811c2e1fe71c46450f8e3..59afd002f35c05a4567475214efb1a6a5d08a9a8 100644 (file)
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -13,17 +13,17 @@
   text-overflow: ellipsis;
 }
 
-html {
+html, body, body #app {
   height: 100%;
+  background-color: var(--background);
 }
 
 body {
   font-family: "Raleway", sans-serif;
-  height: 100%;
 
   #app {
+    height: auto;
     min-height: 100%;
-    background-color: var(--background);
     background-image: var(--background-image);
     background-size: cover;
     background-position: center;

diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
index 2ccb47b2d5afc243e6ddaec3cc8d8544f3868469..fc2fd55034c1c37c6c5ad1171df0156e8851bf00 100644 (file)
--- a/src/components/DynamicTheme.vue
+++ b/src/components/DynamicTheme.vue
@@ -1,17 +1,15 @@
 <template>
   <DynamicStyle>
-    /* light / dark theme switch based on system pref if available */ body #app
-    {
+    :root, body #app.is-light {
     {{ getVars(themes.light) }}
     } @media (prefers-color-scheme: light), (prefers-color-scheme:
-    no-preference) { body #app {
+    no-preference) { :root, body #app {
     {{ getVars(themes.light) }}
-    } } @media (prefers-color-scheme: dark) { body #app { } } /* light / dark
-    theme override base on user choice. */ body #app.is-dark {
+    } } body #app.is-dark {
     {{ getVars(themes.dark) }}
-    } body #app.is-light {
-    {{ getVars(themes.light) }}
-    }
+    } @media (prefers-color-scheme: dark) { :root, body #app {
+    {{ getVars(themes.dark) }}
+    } }
   </DynamicStyle>
 </template>