X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=src%2Fcomponents%2FDynamicTheme.vue;h=2d37fcbbf611594141dbf409a0f907326e3cad1e;hb=585844394d7a4cc4a58e30fd42cb1f8e83ac02f7;hp=cf9963baeb56e31f17e71afb9a1a0c08b101561b;hpb=5fa6b6cfa6b3010279ead23088add5c5664e8ac0;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
index cf9963b..2d37fcb 100644
--- 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>
 
@@ -25,7 +23,13 @@ export default {
     getVars: function (theme) {
       let vars = [];
       for (const themeVars in theme) {
-        vars.push(`--${themeVars}: ${theme[themeVars]}`);
+        let value = `${theme[themeVars]}`;
+        if (!value) {
+          value = "initial";
+        } else if (themeVars == "background-image") {
+          value = `url(${theme[themeVars]})`;
+        }
+        vars.push(`--${themeVars}: ${value}`);
       }
       return vars.join(";");
     },