Adding support for section backgrounf images

4 files changed, 14 insertions, 1 deletions

diff --git a/docs/configuration.md b/docs/configuration.md
index de99271..1ced2d8 100644
--- a/docs/configuration.md
+++ b/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:
diff --git a/src/assets/app.scss b/src/assets/app.scss
index ab067e6..4585874 100644
--- a/src/assets/app.scss
+++ b/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;
 
diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml
index 99f5ed5..f011346 100644
--- a/src/assets/defaults.yml
+++ b/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: []
diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
index cf9963b..2ccb47b 100644
--- a/src/components/DynamicTheme.vue
+++ b/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(";");
     },