feat: light mode ui

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-app dark :style="cssVars">
+    <v-app :style="cssVars">
         <template v-if="socketIsConnected && guiIsReady">
             <the-sidebar />
             <the-topbar />
@@ -119,6 +119,10 @@ export default class App extends Mixins(BaseMixin) {
         return this.$store.state.printer.print_stats?.filename ?? ''
     }
 
+    get theme(): string {
+        return this.$store.state.gui.uiSettings.theme
+    }
+
     get logoColor(): string {
         return this.$store.state.gui.uiSettings.logo
     }
@@ -195,6 +199,11 @@ export default class App extends Mixins(BaseMixin) {
         })
     }
 
+    @Watch('theme')
+    themeChanged(newVal: string): void {
+        this.$vuetify.theme.dark = newVal == 'dark' ? true : false
+    }
+
     drawFavicon(val: number): void {
         const favicon16: HTMLLinkElement | null = document.querySelector("link[rel*='icon'][sizes='16x16']")
         const favicon32: HTMLLinkElement | null = document.querySelector("link[rel*='icon'][sizes='32x32']")

src/components/TheConnectingDialog.vue

@@ -2,7 +2,7 @@
 
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
-        <v-card dark>
+        <v-card>
             <v-toolbar flat dense>
                 <v-toolbar-title>
                     <span class="subheading">
@@ -28,7 +28,7 @@
                 </div>
             </v-card-text>
             <v-card-text v-else class="pt-5">
-                <v-progress-linear color="white" indeterminate></v-progress-linear>
+                <v-progress-linear indeterminate></v-progress-linear>
             </v-card-text>
         </v-card>
     </v-dialog>

src/components/TheEditor.vue

@@ -56,7 +56,7 @@
                 </v-card-text>
             </panel>
         </v-dialog>
-        <v-snackbar v-model="loaderBool" :timeout="-1" :value="true" fixed right bottom dark>
+        <v-snackbar v-model="loaderBool" :timeout="-1" :value="true" fixed right bottom>
             <div>
                 {{ snackbarHeadline }}
                 <br />

src/components/TheSidebar.vue

@@ -2,13 +2,16 @@
     <v-navigation-drawer
         :key="navigationStyle"
         v-model="naviDrawer"
-        :src="sidebarBackground"
         :mini-variant="navigationStyle === 'iconsOnly'"
         :width="navigationWidth"
         :temporary="boolNaviTemp"
         clipped
         app
         :style="sidebarCssVars">
+        <template #img>
+            <v-img :src="sidebarBackground" height="100%" :style="backgroundImageStyle" />
+        </template>
+
         <overlay-scrollbars class="nav-scrollbar">
             <v-list class="pr-0 pt-0 ml-0">
                 <v-list-item-group active-class="active-nav-item">
@@ -53,6 +56,7 @@ import { navigationWidth, topbarHeight } from '@/store/variables'
 import MainsailLogo from '@/components/ui/MainsailLogo.vue'
 import SidebarItem from '@/components/ui/SidebarItem.vue'
 import NavigationMixin from '@/components/mixins/navigation'
+import { CSSProperties } from 'vue/types/jsx'
 
 @Component({
     components: {
@@ -90,14 +94,17 @@ export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
         return !this.isMobile && this.$vuetify.breakpoint.mdAndDown
     }
 
-    get sidebarCssVars(): any {
-        if (this.boolNaviTemp) {
-            return {
-                top: `${topbarHeight}px !important`,
-                'padding-bottom': `${topbarHeight}px`,
-            }
+    get sidebarCssVars(): CSSProperties {
+        let vars: CSSProperties = {
+            ...(this.boolNaviTemp && { top: `${topbarHeight}px !important` }),
+            ...(this.boolNaviTemp && { paddingBottom: `${topbarHeight}px` }),
         }
-        return {}
+
+        return vars
+    }
+
+    get backgroundImageStyle(): CSSProperties {
+        return !this.$vuetify.theme.dark ? { filter: 'invert(1)' } : {}
     }
 
     get sidebarLogo(): string {

src/components/TheTimelapseRenderingSnackbar.vue

@@ -2,12 +2,12 @@
 
 <template>
     <div>
-        <v-snackbar v-model="boolShowDialogRunning" :timeout="-1" :value="true" fixed right bottom dark>
+        <v-snackbar v-model="boolShowDialogRunning" :timeout="-1" :value="true" fixed right bottom>
             <div>{{ $t('Timelapse.TimelapseRendering') }}...</div>
             <v-progress-linear v-if="progress > 0" class="mt-2" :value="progress" indeterminate></v-progress-linear>
             <v-progress-linear v-if="progress === 0" class="mt-2" indeterminate></v-progress-linear>
         </v-snackbar>
-        <v-snackbar v-model="boolShowDialogSuccess" :timeout="5000" :value="true" fixed right bottom dark>
+        <v-snackbar v-model="boolShowDialogSuccess" :timeout="5000" :value="true" fixed right bottom>
             <div>
                 {{ $t('Timelapse.TimelapseRenderingSuccessful') }}
                 <br />

src/components/TheTopbar.vue

@@ -70,7 +70,7 @@
             <the-settings-menu />
             <the-top-corner-menu />
         </v-app-bar>
-        <v-snackbar v-model="uploadSnackbar.status" :timeout="-1" :value="true" fixed right bottom dark>
+        <v-snackbar v-model="uploadSnackbar.status" :timeout="-1" :value="true" fixed right bottom>
             <strong>{{ $t('App.TopBar.Uploading') }} {{ uploadSnackbar.filename }}</strong>
             <br />
             {{ Math.round(uploadSnackbar.percent) }} % @ {{ formatFilesize(Math.round(uploadSnackbar.speed)) }}/s

src/components/TheUpdateDialog.vue

@@ -17,7 +17,7 @@
 
 <template>
     <v-dialog :value="application !== ''" persistent max-width="800" class="mx-0">
-        <v-card dark :loading="!complete">
+        <v-card :loading="!complete">
             <template slot="progress">
                 <v-progress-linear color="primary" indeterminate></v-progress-linear>
             </template>

src/components/charts/HistoryAllPrintStatusChart.vue

@@ -12,46 +12,52 @@
 import Component from 'vue-class-component'
 import { Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import ThemeMixin from '@/components/mixins/theme'
 import type { ECharts } from 'echarts/core'
 import { ECBasicOption } from 'echarts/types/dist/shared.d'
 import { ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/types'
 
 @Component({
     components: {},
 })
-export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin) {
+export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeMixin) {
     declare $refs: {
         historyAllPrintStatus: any
     }
 
-    private chartOptions: ECBasicOption = {
-        darkMode: true,
-        animation: false,
-        grid: {
-            top: 10,
-            right: 0,
-            bottom: 0,
-            left: 10,
-        },
-        tooltip: {
-            trigger: 'item',
-            borderWidth: 0,
-        },
-        series: [
-            {
-                type: 'pie',
-                data: [],
-                avoidLabelOverlap: false,
-                radius: ['35%', '60%'],
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)',
+    private get chartOptions(): ECBasicOption {
+        return {
+            animation: false,
+            grid: {
+                top: 10,
+                right: 0,
+                bottom: 0,
+                left: 10,
+            },
+            tooltip: {
+                trigger: 'item',
+                borderWidth: 0,
+            },
+            series: [
+                {
+                    type: 'pie',
+                    data: [],
+                    avoidLabelOverlap: false,
+                    radius: ['35%', '60%'],
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            // shadowColor: 'rgba(0, 0, 0, 0.5)',
+                            shadowColor: 'red',
+                        },
+                    },
+                    label: {
+                        color: this.fgColorHi,
                     },
                 },
-            },
-        ],
+            ],
+        }
     }
 
     get selectedJobs() {