Adding support for section backgrounf images

diff --git a/docs/configuration.md b/docs/configuration.md
index de992719fe77d0c2413e5d1bfe431ddff8b5fe82..1ced2d8174e35ab40c702d32f35eb28eef932b31 100644 (file)
--- 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 ab067e6941f586d185dd13c45a1f18642ed94abd..4585874299d9eddcea4bf9e50b2b2c739e1959f7 100644 (file)
--- 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 99f5ed5b0477486fab221d7d0e4948e9890b3e13..f011346cf174724e730517dff5d589fada0cc628 100644 (file)
--- 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 cf9963baeb56e31f17e71afb9a1a0c08b101561b..2ccb47b2d5afc243e6ddaec3cc8d8544f3868469 100644 (file)
--- 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(";");
     },