diff --git a/public/css/themes/vzbot.css b/public/css/themes/vzbot.css new file mode 100644 index 000000000..31df6bd4c --- /dev/null +++ b/public/css/themes/vzbot.css @@ -0,0 +1,3 @@ +div.v-navigation-drawer__image div.v-image__image { + background-position: bottom center !important; +} diff --git a/src/App.vue b/src/App.vue index 40b2bc9aa..06bf33c24 100644 --- a/src/App.vue +++ b/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) diff --git a/src/components/mixins/theme.ts b/src/components/mixins/theme.ts index b3f612a8a..9cbfa0fb4 100644 --- a/src/components/mixins/theme.ts +++ b/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` + } } diff --git a/src/store/types.ts b/src/store/types.ts index f0aeea56b..c004690e7 100644 --- a/src/store/types.ts +++ b/src/store/types.ts @@ -56,4 +56,5 @@ export interface Theme { show: boolean light: boolean } + css?: boolean } diff --git a/src/store/variables.ts b/src/store/variables.ts index 23a7a4033..94fb5f6d7 100644 --- a/src/store/variables.ts +++ b/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',