feat(theme): add option for dedicated CSS file per theme (#1958)

Signed-off-by: Stefan Dej <[email protected]>

public/css/themes/vzbot.css

@@ -0,0 +1,3 @@
+div.v-navigation-drawer__image div.v-image__image {
+    background-position: bottom center !important;
+}

src/App.vue

@@ -347,6 +347,26 @@ export default class App extends Mixins(BaseMixin, ThemeMixin) {
         this.drawFavicon(this.print_percent)
     }
 
+    @Watch('themeCss')
+    themeCssChanged(newVal: string | null): void {
+        // remove linked CSS file if it exists
+        const style = document.getElementById('theme-css')
+        if (style) style.remove()
+
+        // if themeCss does not exist, stop here and load no CSS file
+        if (newVal === null) return
+
+        // fetch the CSS file and append it to the head
+        fetch(newVal)
+            .then((response) => response.text())
+            .then((css) => {
+                const newStyle = document.createElement('style')
+                newStyle.id = 'theme-css'
+                newStyle.innerHTML = css
+                document.head.appendChild(newStyle)
+            })
+    }
+
     @Watch('print_percent')
     print_percentChanged(newVal: number): void {
         this.drawFavicon(newVal)

src/components/mixins/theme.ts

@@ -90,4 +90,10 @@ export default class ThemeMixin extends Vue {
 
         return `/img/themes/mainBackground-${this.themeName}.png`
     }
+
+    get themeCss() {
+        if (!(this.theme.css ?? false)) return null
+
+        return `/css/themes/${this.themeName}.css`
+    }
 }

src/store/types.ts

@@ -56,4 +56,5 @@ export interface Theme {
         show: boolean
         light: boolean
     }
+    css?: boolean
 }

src/store/variables.ts

@@ -181,6 +181,7 @@ export const themes: Theme[] = [
         colorLogo: '#FF0000',
         logo: { show: true, light: false },
         sidebarBackground: { show: true, light: false },
+        css: true,
     },
     {
         name: 'prusa',