Adding support for section backgrounf images

docs/configuration.md

@@ -42,6 +42,7 @@ colors:
     text-subtitle: "#424242"
     card-shadow: rgba(0, 0, 0, 0.1)
     link-hover: "#363636"
+    background-image: "assets/your/light/bg.png"
   dark:
     highlight-primary: "#3367d6"
     highlight-secondary: "#4285f4"
@@ -54,6 +55,7 @@ colors:
     text-subtitle: "#f5f5f5"
     card-shadow: rgba(0, 0, 0, 0.4)
     link-hover: "#ffdd57"
+    background-image: "assets/your/dark/bg.png"
 
 # Optional message
 message:

src/assets/app.scss

@@ -24,6 +24,9 @@ body {
   #app {
     min-height: 100%;
     background-color: var(--background);
+    background-image: var(--background-image);
+    background-size: cover;
+    background-position: center;
     color: var(--text);
     transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 

src/assets/defaults.yml

@@ -24,6 +24,7 @@ colors:
     text-subtitle: "#424242"
     card-shadow: rgba(0, 0, 0, 0.1)
     link-hover: "#363636"
+    background-image: ""
   dark:
     highlight-primary: "#3367d6"
     highlight-secondary: "#4285f4"
@@ -36,6 +37,7 @@ colors:
     text-subtitle: "#f5f5f5"
     card-shadow: rgba(0, 0, 0, 0.4)
     link-hover: "#ffdd57"
+    background-image: ""
 
 message: ~
 links: []

src/components/DynamicTheme.vue

@@ -25,7 +25,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 = "inital";
+        } else if (themeVars == "background-image") {
+          value = `url(${theme[themeVars]})`;
+        }
+        vars.push(`--${themeVars}: ${value}`);
       }
       return vars.join(";");
     },