From 154e6efe8036dca91b1bfe9c4fb22ef227df5858 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Wed, 15 Jul 2020 14:26:01 -0700 Subject: Adding support for section backgrounf images --- docs/configuration.md | 2 ++ src/assets/app.scss | 3 +++ src/assets/defaults.yml | 2 ++ src/components/DynamicTheme.vue | 8 +++++++- 4 files changed, 14 insertions(+), 1 deletion(-) 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(";"); }, -- cgit v1.2.3