Added support for background images

images/backgrounds/gruvbox.svg

@@ -0,0 +1,198 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="257"
+   height="256"
+   viewBox="0 0 67.997915 67.733336"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
+   sodipodi:docname="gruvbox.svg"
+   inkscape:export-filename="gruvbox.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#282828"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4"
+     inkscape:cx="92.25"
+     inkscape:cy="114.25"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="2190"
+     inkscape:window-height="1404"
+     inkscape:window-x="1463"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="true"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d6d6d6"
+     showborder="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="color:#000000;overflow:visible;fill:#282828;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264584;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000"
+       id="rect40644"
+       width="67.733337"
+       height="67.73333"
+       x="0"
+       y="0" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 17.065625,0.1322915 V 67.601042"
+       id="path37309" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 8.5989583,0.1322915 V 67.601042"
+       id="path37610" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 25.532292,0.1322915 V 67.601042"
+       id="path37612" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 33.998959,0.1322915 V 67.601042"
+       id="path37616" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 42.465625,0.1322915 V 67.601042"
+       id="path37618" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 50.932292,0.1322915 V 67.601042"
+       id="path37620" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 59.398959,0.1322915 V 67.601042"
+       id="path37622" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667,0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 67.865626,0.1322915 V 67.601042"
+       id="path37626" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,50.932293 H 67.601042"
+       id="path43996" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,59.39896 H 67.601042"
+       id="path43998" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,42.465626 H 67.601042"
+       id="path44000" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,33.998959 H 67.601042"
+       id="path44002" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,25.532293 H 67.601042"
+       id="path44004" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,17.065626 H 67.601042"
+       id="path44006" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,8.598959 H 67.601042"
+       id="path44008" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,0.132292 H 67.601042"
+       id="path44010" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,55.165625 H 67.601042"
+       id="path44772" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,63.632292 H 67.601042"
+       id="path44774" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,46.698958 H 67.601042"
+       id="path44776" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,38.232291 H 67.601042"
+       id="path44778" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,29.765625 H 67.601042"
+       id="path44780" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,21.298958 H 67.601042"
+       id="path44782" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,12.832291 H 67.601042"
+       id="path44784" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,4.365624 H 67.601042"
+       id="path44786" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 12.832292,0.1322915 V 67.601042"
+       id="path44813" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 4.3656249,0.1322915 V 67.601042"
+       id="path44815" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 21.298959,0.1322915 V 67.601042"
+       id="path44817" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 29.765626,0.1322915 V 67.601042"
+       id="path44819" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 38.232292,0.1322915 V 67.601042"
+       id="path44821" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 46.698959,0.1322915 V 67.601042"
+       id="path44823" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 55.165626,0.1322915 V 67.601042"
+       id="path44825" />
+    <path
+       style="color:#000000;overflow:visible;fill:#ffeeaa;fill-opacity:0.256059;fill-rule:evenodd;stroke:#3c3836;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598,0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 63.632293,0.1322915 V 67.601042"
+       id="path44827" />
+  </g>
+</svg>

js/app.js

@@ -127,7 +127,7 @@ class App {
 	setTheme(theme) {//{{{
 		this.theme = theme
 		document.body.style.color = theme.colors.page.text
-		document.body.style.backgroundColor = theme.colors.page.background
+		document.body.style.background = theme.colors.page.background
 
 		let sectionClasses = document.getElementById('sections').classList
 		sectionClasses.remove('theme-brighter')
@@ -248,7 +248,7 @@ class Section {
 		)
 
 		return `
-			<div class="section" style="border: 4px solid ${color[0]}; background: ${theme.colors.section.background}">
+			<div class="section" style="border: 4px solid ${color[0]}; background: ${theme.colors.section.background}; box-shadow: ${theme.colors.section.shadow}">
 				<div class="name" style="background: ${color[0]}; color: ${color[1]}">${this.label}</div>
 				<div class="items" style="background: ${theme.colors.section.background}">
 					${itemHTML.join('')}

themes.yaml

@@ -81,7 +81,7 @@ subdued:
 gruvbox:
   page:
     text: "#bdae93"
-    background: "#282828"
+    background: "#282828 url('/images/backgrounds/gruvbox.svg')"
     header: "#504945"
     footer:
       show: true
@@ -99,6 +99,7 @@ gruvbox:
 
   section:
     background: "#504945"
+    shadow: "10px 10px 15px 0px rgba(0, 0, 0, 0.25)"
     borders:
       - ["#fb4934", "#eee"]
       - ["#b8bb26", "#333"]