feat: expose css variable for changing theme logo color (#1856)

package.json

@@ -57,6 +57,7 @@
         "vue-class-component": "^7.2.6",
         "vue-echarts": "^6.0.2",
         "vue-i18n": "^8.25.0",
+        "vue-inline-svg": "^2.1.3",
         "vue-load-image": "^0.2.0",
         "vue-meta": "^2.4.0",
         "vue-observe-visibility": "^1.0.0",

src/App.vue

@@ -160,6 +160,7 @@ export default class App extends Mixins(BaseMixin, ThemeMixin) {
     get cssVars(): { [key: string]: string } {
         return {
             '--v-btn-text-primary': this.primaryTextColor,
+            '--color-logo': this.logoColor,
             '--color-primary': this.primaryColor,
             '--color-warning': this.warningColor,
             '--panel-toolbar-icon-btn-width': panelToolbarHeight + 'px',

src/components/TheTopbar.vue

@@ -3,22 +3,9 @@
         <v-app-bar app elevate-on-scroll :height="topbarHeight" class="topbar pa-0" clipped-left>
             <v-app-bar-nav-icon tile @click.stop="naviDrawer = !naviDrawer" />
             <router-link to="/">
-                <template v-if="sidebarLogo">
-                    <img
-                        :src="sidebarLogo"
-                        style="height: 32px"
-                        class="nav-logo ml-4 mr-1 d-none d-sm-flex"
-                        alt="Logo" />
-                </template>
-                <template v-else>
-                    <mainsail-logo
-                        :color="logoColor"
-                        style="height: 32px"
-                        class="nav-logo ml-4 mr-1 d-none d-sm-flex"
-                        router
-                        to="/"
-                        :ripple="false" />
-                </template>
+                <inline-svg v-if="sidebarLogo && isSvgLogo" :src="'http:' + sidebarLogo" :class="logoClasses" />
+                <img v-else-if="sidebarLogo" :src="sidebarLogo" :class="logoClasses" alt="Logo" />
+                <mainsail-logo v-else :color="logoColor" :class="logoClasses" router to="/" :ripple="false" />
             </router-link>
             <v-toolbar-title class="text-no-wrap ml-0 pl-2 mr-2">{{ printerName }}</v-toolbar-title>
             <printer-selector v-if="countPrinters" />
@@ -102,6 +89,7 @@ import TheNotificationMenu from '@/components/notifications/TheNotificationMenu.
 import { topbarHeight } from '@/store/variables'
 import { mdiAlertOctagonOutline, mdiContentSave, mdiFileUpload, mdiClose, mdiCloseThick } from '@mdi/js'
 import EmergencyStopDialog from '@/components/dialogs/EmergencyStopDialog.vue'
+import InlineSvg from 'vue-inline-svg'
 
 type uploadSnackbar = {
     status: boolean
@@ -115,6 +103,7 @@ type uploadSnackbar = {
 @Component({
     components: {
         EmergencyStopDialog,
+        InlineSvg,
         Panel,
         TheSettingsMenu,
         TheTopCornerMenu,
@@ -207,10 +196,18 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         return this.$store.getters['files/getSidebarLogo']
     }
 
+    get isSvgLogo() {
+        return this.sidebarLogo.includes('.svg?timestamp=')
+    }
+
     get logoColor(): string {
         return this.$store.state.gui.uiSettings.logo
     }
 
+    get logoClasses() {
+        return ['nav-logo', 'ml-2', 'mr-1', 'd-none', 'd-sm-flex']
+    }
+
     get boolShowUploadAndPrint() {
         return (
             this.klippyIsConnected &&
@@ -343,6 +340,10 @@ export default class TheTopbar extends Mixins(BaseMixin) {
     height: 100% !important;
     max-height: none;
 }
+::v-deep .topbar .nav-logo {
+    width: auto;
+    height: 32px;
+}
 /*noinspection CssUnusedSymbol*/
 .topbar .v-btn.v-btn--icon {
     /*noinspection CssUnresolvedCustomProperty*/