From 627ae4d79728168f39286163f98fbfb6e3170b2b Mon Sep 17 00:00:00 2001
From: big boy <46307379+blu3mangroup@users.noreply.github.com>
Date: Wed, 4 Oct 2023 14:58:59 +0100
Subject: [PATCH 01/22] light mode, theme mixin created

---
 src/App.vue                                   |  11 +-
 src/components/TheConnectingDialog.vue        |   4 +-
 src/components/TheEditor.vue                  |   2 +-
 src/components/TheSidebar.vue                 |  23 ++-
 .../TheTimelapseRenderingSnackbar.vue         |   4 +-
 src/components/TheTopbar.vue                  |   2 +-
 src/components/TheUpdateDialog.vue            |   2 +-
 .../charts/HistoryAllPrintStatusChart.vue     |  60 ++++---
 .../charts/HistoryFilamentUsage.vue           | 157 +++++++++---------
 src/components/charts/HistoryPrinttimeAvg.vue | 129 +++++++-------
 src/components/charts/TempChart.vue           |  26 +--
 src/components/gcodeviewer/Viewer.vue         |   4 +-
 src/components/mixins/theme.ts                |  34 ++++
 .../panels/Machine/ConfigFilesPanel.vue       |  13 +-
 src/components/panels/StatusPanel.vue         |   2 +-
 .../settings/SettingsUiSettingsTab.vue        |  27 +++
 src/locales/en.json                           |   4 +
 src/pages/Heightmap.vue                       |  38 ++---
 src/store/gui/index.ts                        |   3 +-
 src/store/gui/types.ts                        |   1 +
 src/store/printer/getters.ts                  |   1 +
 src/store/server/history/getters.ts           |   9 -
 src/store/server/history/types.ts             |   3 -
 src/store/variables.ts                        |   1 +
 24 files changed, 319 insertions(+), 241 deletions(-)
 create mode 100644 src/components/mixins/theme.ts

diff --git a/src/App.vue b/src/App.vue
index 29a4a2b71..a7e0aba90 100644
--- a/src/App.vue
+++ b/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']")
diff --git a/src/components/TheConnectingDialog.vue b/src/components/TheConnectingDialog.vue
index 21c86ed90..e847a05b8 100644
--- a/src/components/TheConnectingDialog.vue
+++ b/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>
diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index 63463ab87..2a653650e 100644
--- a/src/components/TheEditor.vue
+++ b/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 />
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 2417d25ed..ad212ee98 100644
--- a/src/components/TheSidebar.vue
+++ b/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 {
diff --git a/src/components/TheTimelapseRenderingSnackbar.vue b/src/components/TheTimelapseRenderingSnackbar.vue
index 50efc308b..074994c5b 100644
--- a/src/components/TheTimelapseRenderingSnackbar.vue
+++ b/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 />
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index f06bc3068..ee9225313 100644
--- a/src/components/TheTopbar.vue
+++ b/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
diff --git a/src/components/TheUpdateDialog.vue b/src/components/TheUpdateDialog.vue
index 946d9f374..966652f20 100644
--- a/src/components/TheUpdateDialog.vue
+++ b/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>
diff --git a/src/components/charts/HistoryAllPrintStatusChart.vue b/src/components/charts/HistoryAllPrintStatusChart.vue
index 786edd4fc..46026bf2d 100644
--- a/src/components/charts/HistoryAllPrintStatusChart.vue
+++ b/src/components/charts/HistoryAllPrintStatusChart.vue
@@ -12,6 +12,7 @@
 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'
@@ -19,39 +20,44 @@ import { ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/ty
 @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() {
diff --git a/src/components/charts/HistoryFilamentUsage.vue b/src/components/charts/HistoryFilamentUsage.vue
index fdc8b70ae..ab76d8a31 100644
--- a/src/components/charts/HistoryFilamentUsage.vue
+++ b/src/components/charts/HistoryFilamentUsage.vue
@@ -13,96 +13,98 @@ import Component from 'vue-class-component'
 import { Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import type { ECharts } from 'echarts/core'
+import ThemeMixin from '../mixins/theme'
 
 @Component({})
-export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
+export default class HistoryPrinttimeAvg extends Mixins(BaseMixin, ThemeMixin) {
     declare $refs: {
         historyFilamentUsage: any
     }
 
-    private chartOptions: any = {
-        darkMode: true,
-        animation: false,
-        grid: {
-            top: 25,
-            right: 40,
-            bottom: 30,
-            left: 40,
-        },
-        tooltip: {
-            trigger: 'axis',
-            borderWidth: 0,
-            formatter: (datasets: any) => {
-                let output = ''
+    private chartOptions(): any {
+        return {
+            animation: false,
+            grid: {
+                top: 25,
+                right: 40,
+                bottom: 30,
+                left: 40,
+            },
+            tooltip: {
+                trigger: 'axis',
+                borderWidth: 0,
+                formatter: (datasets: any) => {
+                    let output = ''
 
-                if (datasets.length) {
-                    output = datasets[0]['marker']
-                    const outputTime = datasets[0]['axisValueLabel']
-                    const a = outputTime.split(/[^0-9]/)
-                    const outputTimeDate = new Date(a[0], a[1] - 1, a[2])
-                    const outputValue = Math.round(datasets[0]['data'][1] * 10) / 10
+                    if (datasets.length) {
+                        output = datasets[0]['marker']
+                        const outputTime = datasets[0]['axisValueLabel']
+                        const a = outputTime.split(/[^0-9]/)
+                        const outputTimeDate = new Date(a[0], a[1] - 1, a[2])
+                        const outputValue = Math.round(datasets[0]['data'][1] * 10) / 10
 
-                    output += outputTimeDate.toLocaleDateString() + ': ' + outputValue + 'm'
-                }
+                        output += outputTimeDate.toLocaleDateString() + ': ' + outputValue + 'm'
+                    }
 
-                return output
-            },
-        },
-        xAxis: {
-            type: 'time',
-            min: new Date().setHours(0, 0, 0) - 60 * 60 * 24 * 14 * 1000,
-            max: new Date().setHours(0, 0, 0),
-            minInterval: 60 * 60 * 24 * 1000,
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.06)',
+                    return output
                 },
             },
-            axisLabel: {
-                color: 'rgba(255, 255, 255, 0.24)',
-                margin: 10,
-            },
-        },
-        yAxis: {
-            name: this.$t('History.HistoryFilamentUsage'),
-            type: 'value',
-            minInterval: 10,
-            maxInterval: 100,
-            nameLocation: 'end',
-            nameGap: 5,
-            nameTextStyle: {
-                color: 'rgba(255, 255, 255, 0.24)',
-                align: 'left',
-            },
-            splitLine: {
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.12)',
+            xAxis: {
+                type: 'time',
+                min: new Date().setHours(0, 0, 0) - 60 * 60 * 24 * 14 * 1000,
+                max: new Date().setHours(0, 0, 0),
+                minInterval: 60 * 60 * 24 * 1000,
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: this.fgColorLow,
+                    },
                 },
-            },
-            axisLabel: {
-                color: 'rgba(255, 255, 255, 0.24)',
-                formatter: '{value}',
-                //rotate: 90,
-                //showMaxLabel: false,
-                showMinLabel: true,
-                margin: 5,
-            },
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.12)',
+                axisLabel: {
+                    color: this.fgColorLow,
+                    margin: 10,
                 },
             },
-        },
-        color: ['#BDBDBD'],
-        series: [
-            {
-                type: 'bar',
-                data: [],
-                showSymbol: false,
+            yAxis: {
+                name: this.$t('History.HistoryFilamentUsage'),
+                type: 'value',
+                minInterval: 10,
+                maxInterval: 100,
+                nameLocation: 'end',
+                nameGap: 5,
+                nameTextStyle: {
+                    color: this.fgColorLow,
+                    align: 'left',
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: this.fgColorLow,
+                    },
+                },
+                axisLabel: {
+                    color: this.fgColorLow,
+                    formatter: '{value}',
+                    //rotate: 90,
+                    //showMaxLabel: false,
+                    showMinLabel: true,
+                    margin: 5,
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: this.fgColorMid,
+                    },
+                },
             },
-        ],
+            color: ['#BDBDBD'],
+            series: [
+                {
+                    type: 'bar',
+                    data: [],
+                    showSymbol: false,
+                },
+            ],
+        }
     }
 
     get filamentUsageArray() {
@@ -114,8 +116,9 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
     }
 
     mounted() {
-        this.chartOptions.series[0].data = this.filamentUsageArray
-        this.chart?.setOption(this.chartOptions)
+        let chart = this.chartOptions()
+        chart.series[0].data = this.filamentUsageArray
+        this.chart?.setOption(chart)
     }
 
     beforeDestroy() {
diff --git a/src/components/charts/HistoryPrinttimeAvg.vue b/src/components/charts/HistoryPrinttimeAvg.vue
index a13ae5f11..1ddc882d3 100644
--- a/src/components/charts/HistoryPrinttimeAvg.vue
+++ b/src/components/charts/HistoryPrinttimeAvg.vue
@@ -12,82 +12,84 @@ import Component from 'vue-class-component'
 import { Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import type { ECharts } from 'echarts/core'
+import ThemeMixin from '../mixins/theme'
 
 @Component({
     components: {},
 })
-export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
+export default class HistoryPrinttimeAvg extends Mixins(BaseMixin, ThemeMixin) {
     declare $refs: {
         historyPrinttimeAvg: any
     }
 
-    private chartOptions: any = {
-        darkMode: true,
-        animation: false,
-        grid: {
-            top: 25,
-            right: 40,
-            bottom: 30,
-            left: 40,
-        },
-        tooltip: {
-            trigger: 'item',
-            borderWidth: 0,
-        },
-        xAxis: {
-            type: 'category',
-            data: ['0-2h', '2-6h', '6-12h', '12-24h', '>24h'],
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.06)',
-                },
-            },
-            axisLabel: {
-                color: 'rgba(255, 255, 255, 0.24)',
-                margin: 10,
+    private chartOptions(): any {
+        return {
+            animation: false,
+            grid: {
+                top: 25,
+                right: 40,
+                bottom: 30,
+                left: 40,
             },
-        },
-        yAxis: {
-            name: this.$t('History.HistoryPrinttimeAVG'),
-            type: 'value',
-            minInterval: 10,
-            maxInterval: 100,
-            nameLocation: 'end',
-            nameGap: 5,
-            nameTextStyle: {
-                color: 'rgba(255, 255, 255, 0.24)',
-                align: 'left',
+            tooltip: {
+                trigger: 'item',
+                borderWidth: 0,
             },
-            splitLine: {
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.12)',
+            xAxis: {
+                type: 'category',
+                data: ['0-2h', '2-6h', '6-12h', '12-24h', '>24h'],
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: this.fgColorFaint,
+                    },
                 },
-            },
-            axisLabel: {
-                color: 'rgba(255, 255, 255, 0.24)',
-                formatter: '{value}',
-                //rotate: 90,
-                //showMaxLabel: false,
-                showMinLabel: true,
-                margin: 5,
-            },
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.12)',
+                axisLabel: {
+                    color: this.fgColorLow,
+                    margin: 10,
                 },
             },
-        },
-        series: [
-            {
-                type: 'bar',
-                data: [],
-                itemStyle: {
-                    color: '#BDBDBD',
+            yAxis: {
+                name: this.$t('History.HistoryPrinttimeAVG'),
+                type: 'value',
+                minInterval: 10,
+                maxInterval: 100,
+                nameLocation: 'end',
+                nameGap: 5,
+                nameTextStyle: {
+                    color: this.fgColorLow,
+                    align: 'left',
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: this.fgColorLow,
+                    },
+                },
+                axisLabel: {
+                    color: this.fgColorLow,
+                    formatter: '{value}',
+                    //rotate: 90,
+                    //showMaxLabel: false,
+                    showMinLabel: true,
+                    margin: 5,
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: this.fgColorLow,
+                    },
                 },
             },
-        ],
+            series: [
+                {
+                    type: 'bar',
+                    data: [],
+                    itemStyle: {
+                        color: '#BDBDBD',
+                    },
+                },
+            ],
+        }
     }
 
     get printtimeAvgArray() {
@@ -99,8 +101,9 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
     }
 
     mounted() {
-        this.chartOptions.series[0].data = this.printtimeAvgArray
-        this.chart?.setOption(this.chartOptions)
+        let chart = this.chartOptions()
+        chart.series[0].data = this.printtimeAvgArray
+        this.chart?.setOption(chart)
     }
 
     beforeDestroy() {
diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index 50619df51..b27a76230 100644
--- a/src/components/charts/TempChart.vue
+++ b/src/components/charts/TempChart.vue
@@ -20,6 +20,7 @@ import type { ECharts } from 'echarts/core'
 import type { ECBasicOption } from 'echarts/types/dist/shared.d'
 import { mdiClock } from '@mdi/js'
 import { datasetTypesInPercents } from '@/store/variables'
+import ThemeMixin from '../mixins/theme'
 
 interface echartsTooltipObj {
     [key: string]: any
@@ -28,7 +29,7 @@ interface echartsTooltipObj {
 @Component({
     components: {},
 })
-export default class TempChart extends Mixins(BaseMixin) {
+export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
     declare $refs: {
         tempchart: any
     }
@@ -36,7 +37,6 @@ export default class TempChart extends Mixins(BaseMixin) {
     private isVisible = true
     get chartOptions(): ECBasicOption {
         return {
-            darkMode: true,
             renderer: 'svg',
             animation: false,
             tooltip: this.tooltip,
@@ -58,11 +58,11 @@ export default class TempChart extends Mixins(BaseMixin) {
                 splitLine: {
                     show: true,
                     lineStyle: {
-                        color: 'rgba(255, 255, 255, 0.06)',
+                        color: this.fgColorFaint,
                     },
                 },
                 axisLabel: {
-                    color: 'rgba(255, 255, 255, 0.24)',
+                    color: this.fgColorLow,
                     margin: 10,
                     formatter: this.timeFormat,
                 },
@@ -78,10 +78,10 @@ export default class TempChart extends Mixins(BaseMixin) {
         return {
             animation: false,
             trigger: 'axis',
-            backgroundColor: 'rgba(0,0,0,0.9)',
+            backgroundColor: this.bgColor(1),
             borderWidth: 0,
             textStyle: {
-                color: '#fff',
+                color: this.fgColorHi,
                 fontSize: '14px',
             },
             padding: 15,
@@ -114,16 +114,16 @@ export default class TempChart extends Mixins(BaseMixin) {
                 nameLocation: 'end',
                 nameGap: 5,
                 nameTextStyle: {
-                    color: 'rgba(255, 255, 255, 0.24)',
+                    color: this.fgColorMid,
                     align: 'left',
                 },
                 splitLine: {
                     lineStyle: {
-                        color: 'rgba(255, 255, 255, 0.12)',
+                        color: this.fgColorFaint,
                     },
                 },
                 axisLabel: {
-                    color: 'rgba(255, 255, 255, 0.24)',
+                    color: this.fgColorMid,
                     formatter: '{value}',
                     rotate: 90,
                     //showMaxLabel: false,
@@ -133,7 +133,7 @@ export default class TempChart extends Mixins(BaseMixin) {
                 axisLine: {
                     show: true,
                     lineStyle: {
-                        color: 'rgba(255, 255, 255, 0.12)',
+                        color: this.fgColorLow,
                     },
                 },
             },
@@ -147,14 +147,14 @@ export default class TempChart extends Mixins(BaseMixin) {
                 nameLocation: 'end',
                 nameGap: 5,
                 nameTextStyle: {
-                    color: 'rgba(255, 255, 255, 0.24)',
+                    color: this.fgColorMid,
                     align: 'right',
                 },
                 splitLine: {
                     show: false,
                 },
                 axisLabel: {
-                    color: 'rgba(255, 255, 255, 0.24)',
+                    color: this.fgColorMid,
                     formatter: (value: number) => {
                         return value * 100
                     },
@@ -165,7 +165,7 @@ export default class TempChart extends Mixins(BaseMixin) {
                 axisLine: {
                     show: true,
                     lineStyle: {
-                        color: 'rgba(255, 255, 255, 0.12)',
+                        color: this.fgColorLow,
                     },
                 },
             },
diff --git a/src/components/gcodeviewer/Viewer.vue b/src/components/gcodeviewer/Viewer.vue
index 24c60a035..778415ec5 100644
--- a/src/components/gcodeviewer/Viewer.vue
+++ b/src/components/gcodeviewer/Viewer.vue
@@ -209,7 +209,7 @@
             </v-card-text>
             <resize-observer @notify="handleResize" />
         </panel>
-        <v-snackbar v-model="loading" :timeout="-1" :value="true" fixed right bottom dark>
+        <v-snackbar v-model="loading" :timeout="-1" :value="true" fixed right bottom>
             <div>
                 {{ $t('GCodeViewer.Rendering') }} - {{ loadingPercent }}%
                 <br />
@@ -222,7 +222,7 @@
                 </v-btn>
             </template>
         </v-snackbar>
-        <v-snackbar v-model="downloadSnackbar.status" :timeout="-1" :value="true" fixed right bottom dark>
+        <v-snackbar v-model="downloadSnackbar.status" :timeout="-1" :value="true" fixed right bottom>
             <template v-if="downloadSnackbar.total > 0">
                 <div>
                     {{ $t('GCodeViewer.Downloading') }} - {{ Math.round(downloadSnackbar.percent) }} % @
diff --git a/src/components/mixins/theme.ts b/src/components/mixins/theme.ts
new file mode 100644
index 000000000..f1eae2136
--- /dev/null
+++ b/src/components/mixins/theme.ts
@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component
+export default class ThemeMixin extends Vue {
+    protected fgColor(alpha: number = 1, dark: boolean = this.$vuetify.theme.dark): string {
+        const base = dark ? 255 : 0
+        return `rgba(${base}, ${base}, ${base}, ${alpha})`
+    }
+
+    protected bgColor(alpha: number = 1) {
+        return this.fgColor(alpha, !this.$vuetify.theme.dark)
+    }
+
+    get fgColorHi() {
+        return this.fgColor(0.8)
+    }
+
+    get fgColorMid() {
+        return this.fgColor(0.5)
+    }
+
+    get fgColorLow() {
+        return this.fgColor(0.2)
+    }
+
+    get fgColorFaint() {
+        return this.fgColor(0.1)
+    }
+
+    get machineButtonCol() {
+        return this.$vuetify.theme.dark ? 'grey darken-3' : 'grey lighten-1'
+    }
+}
diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
index b0463caf0..24c22b12f 100644
--- a/src/components/panels/Machine/ConfigFilesPanel.vue
+++ b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -512,7 +512,7 @@
             </panel>
         </v-dialog>
 
-        <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>
             <span v-if="uploadSnackbar.max > 1" class="mr-1">
                 ({{ uploadSnackbar.number }}/{{ uploadSnackbar.max }})
             </span>
@@ -533,6 +533,7 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import ThemeMixin from '@/components/mixins/theme'
 import { formatFilesize, sortFiles } from '@/plugins/helpers'
 import { FileStateFile, FileStateGcodefile } from '@/store/files/types'
 import axios from 'axios'
@@ -609,7 +610,7 @@ interface draggingFile {
 @Component({
     components: { Panel },
 })
-export default class ConfigFilesPanel extends Mixins(BaseMixin) {
+export default class ConfigFilesPanel extends Mixins(BaseMixin, ThemeMixin) {
     mdiInformation = mdiInformation
     mdiClose = mdiClose
     mdiCog = mdiCog
@@ -775,7 +776,7 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
             },
             {
                 text: this.$t('Machine.ConfigFilesPanel.UploadFile'),
-                color: 'grey darken-3',
+                color: this.machineButtonCol,
                 icon: mdiFileUpload,
                 loadingName: null,
                 onlyWriteable: true,
@@ -784,7 +785,7 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
             },
             {
                 text: this.$t('Machine.ConfigFilesPanel.CreateFile'),
-                color: 'grey darken-3',
+                color: this.machineButtonCol,
                 icon: mdiFilePlus,
                 loadingName: null,
                 onlyWriteable: true,
@@ -793,7 +794,7 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
             },
             {
                 text: this.$t('Machine.ConfigFilesPanel.CreateDirectory'),
-                color: 'grey darken-3',
+                color: this.machineButtonCol,
                 icon: mdiFolderPlus,
                 loadingName: null,
                 onlyWriteable: true,
@@ -802,7 +803,7 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
             },
             {
                 text: this.$t('Machine.ConfigFilesPanel.RefreshDirectory'),
-                color: 'grey darken-3',
+                color: this.machineButtonCol,
                 icon: mdiRefresh,
                 loadingName: null,
                 onlyWriteable: false,
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index a7e793541..24cf4eb80 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -88,7 +88,7 @@
                 </v-container>
                 <v-divider class="mt-0 mb-0"></v-divider>
             </template>
-            <v-tabs v-model="activeTab" fixed-tabs dark>
+            <v-tabs v-model="activeTab" fixed-tabs>
                 <v-tab v-if="current_filename" href="#status">{{ $t('Panels.StatusPanel.Status') }}</v-tab>
                 <v-tab href="#files">{{ $t('Panels.StatusPanel.Files') }}</v-tab>
                 <v-tab href="#jobqueue">{{ $t('Panels.StatusPanel.Jobqueue', { count: jobsCount }) }}</v-tab>
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index bfd44fc0e..6c6e189d1 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -2,6 +2,12 @@
     <div>
         <v-card flat>
             <v-card-text>
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.Theme')"
+                    :sub-title="$t('Settings.UiSettingsTab.ThemeDescription')">
+                    <v-select v-model="theme" :items="themes" class="mt-0" hide-details outlined dense />
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row :title="$t('Settings.UiSettingsTab.Logo')">
                     <v-btn
                         v-if="logoColor.toLowerCase() !== defaultLogoColor.toLowerCase()"
@@ -239,6 +245,27 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
     defaultLogoColor = defaultLogoColor
     defaultPrimaryColor = defaultPrimaryColor
 
+    get theme() {
+        return this.$store.state.gui.uiSettings.theme
+    }
+
+    set theme(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.theme', value: newVal })
+    }
+
+    get themes() {
+        return [
+            {
+                text: this.$t('Settings.UiSettingsTab.ThemeDark'),
+                value: 'dark',
+            },
+            {
+                text: this.$t('Settings.UiSettingsTab.ThemeLight'),
+                value: 'light',
+            },
+        ]
+    }
+
     get logoColor() {
         return this.$store.state.gui.uiSettings.logo
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index 6e03f54bd..62a525eff 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1106,6 +1106,10 @@
             "ScrewsTiltAdjustDialogDescription": "Display helper dialog for SCREWS_TILT_CALCULATE.",
             "TempchartHeight": "Height Temperature Chart",
             "TempchartHeightDescription": "Modify the height of the temperature chart on the Dashboard.",
+            "Theme": "Theme",
+            "ThemeDark": "Dark",
+            "ThemeDescription": "Change the overall look and feel of the application",
+            "ThemeLight": "Light",
             "UiSettings": "UI-Settings"
         },
         "Update": "update",
diff --git a/src/pages/Heightmap.vue b/src/pages/Heightmap.vue
index 660a93bf4..b17f57c32 100644
--- a/src/pages/Heightmap.vue
+++ b/src/pages/Heightmap.vue
@@ -400,6 +400,7 @@
 import { Component, Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
+import ThemeMixin from '@/components/mixins/theme'
 
 import Panel from '@/components/ui/Panel.vue'
 import {
@@ -449,7 +450,7 @@ interface HeightmapSerie {
         Panel,
     },
 })
-export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
+export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin, ThemeMixin) {
     declare $refs: {
         // eslint-disable-next-line
         heightmap: any
@@ -503,30 +504,21 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
     private meshOpacity = 1
     private flatOpacity = 0.5
 
-    private colorAxisName = 'rgba(255,255,255,0.5)'
-    private colorAxisLabel = 'rgba(255,255,255,0.5)'
-    private colorAxisLine = 'rgba(255,255,255,0.2)'
-    private colorAxisTick = 'rgba(255,255,255,0.2)'
-    private colorSplitLine = 'rgba(255,255,255,0.2)'
-
-    private colorAxisPointer = 'rgba(255,255,255,0.8)'
-
-    private colorVisualMap = 'rgba(255,255,255,0.8)'
     private fontSizeVisualMap = 14
 
     get chartOptions() {
         return {
             tooltip: {
-                backgroundColor: 'rgba(0,0,0,0.9)',
+                backgroundColor: this.bgColor(0.9),
                 borderWidth: 0,
                 textStyle: {
-                    color: '#fff',
+                    color: this.fgColor(1),
                     fontSize: '14px',
                 },
                 padding: 15,
                 formatter: this.tooltipFormatter,
             },
-            darkMode: true,
+            darkMode: this.$vuetify.theme.dark,
             animation: false,
             legend: {
                 show: false,
@@ -561,14 +553,14 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
                 itemHeight: 350,
                 precision: 3,
                 textStyle: {
-                    color: this.colorVisualMap,
+                    color: this.fgColorHi,
                     fontSize: this.fontSizeVisualMap,
                 },
             },
             xAxis3D: {
                 type: 'value',
                 nameTextStyle: {
-                    color: this.colorAxisName,
+                    color: this.fgColorMid,
                 },
                 min: this.rangeX[0],
                 max: this.rangeX[1],
@@ -577,7 +569,7 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
             yAxis3D: {
                 type: 'value',
                 nameTextStyle: {
-                    color: this.colorAxisName,
+                    color: this.fgColorMid,
                 },
                 min: this.rangeY[0],
                 max: this.rangeY[1],
@@ -587,7 +579,7 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
                 min: this.scaleZMax * -1,
                 max: this.scaleZMax,
                 nameTextStyle: {
-                    color: this.colorAxisName,
+                    color: this.fgColorMid,
                 },
                 axisPointer: {
                     label: {
@@ -601,31 +593,31 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
             grid3D: {
                 axisLabel: {
                     textStyle: {
-                        color: this.colorAxisLabel,
+                        color: this.fgColorMid,
                     },
                 },
                 axisLine: {
                     lineStyle: {
-                        color: this.colorAxisLine,
+                        color: this.fgColorLow,
                     },
                 },
                 axisTick: {
                     lineStyle: {
-                        color: this.colorAxisTick,
+                        color: this.fgColorLow,
                     },
                 },
                 splitLine: {
                     lineStyle: {
-                        color: this.colorSplitLine,
+                        color: this.fgColorLow,
                     },
                 },
                 axisPointer: {
                     lineStyle: {
-                        color: this.colorAxisPointer,
+                        color: this.fgColorHi,
                     },
                     label: {
                         textStyle: {
-                            color: this.colorAxisPointer,
+                            color: this.fgColorHi,
                         },
                     },
                 },
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index c484e21da..4d19b6eec 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -3,7 +3,7 @@ import { Module } from 'vuex'
 import { actions } from '@/store/gui/actions'
 import { mutations } from '@/store/gui/mutations'
 import { getters } from '@/store/gui/getters'
-import { defaultLogoColor, defaultPrimaryColor } from '@/store/variables'
+import { defaultTheme, defaultLogoColor, defaultPrimaryColor } from '@/store/variables'
 
 // load modules
 import { console } from '@/store/gui/console'
@@ -147,6 +147,7 @@ export const getDefaultState = (): GuiState => {
             entries: [],
         },
         uiSettings: {
+            theme: defaultTheme,
             logo: defaultLogoColor,
             primary: defaultPrimaryColor,
             displayCancelPrint: false,
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index 8eba4690b..9c619d700 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -97,6 +97,7 @@ export interface GuiState {
     presets?: GuiPresetsState
     remoteprinters?: GuiRemoteprintersState
     uiSettings: {
+        theme: string
         logo: string
         primary: string
         displayCancelPrint: boolean
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index 38253d0f6..3da6dcbc9 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -10,6 +10,7 @@ import {
     PrinterStateMiscellaneous,
     PrinterStateMcu,
     PrinterStateMacro,
+    PrinterStateToolchangeMacro,
     PrinterGetterObject,
     PrinterStateLight,
 } from '@/store/printer/types'
diff --git a/src/store/server/history/getters.ts b/src/store/server/history/getters.ts
index 89f38fa70..593ab593e 100644
--- a/src/store/server/history/getters.ts
+++ b/src/store/server/history/getters.ts
@@ -105,9 +105,6 @@ export const getters: GetterTree<ServerHistoryState, any> = {
                     value: 1,
                     itemStyle,
                     showInTable: !rootState.gui?.view.history.hidePrintStatus.includes(current.status),
-                    label: {
-                        color: '#fff',
-                    },
                 })
             }
         })
@@ -144,9 +141,6 @@ export const getters: GetterTree<ServerHistoryState, any> = {
                     borderRadius: 3,
                 },
                 showInTable: true,
-                label: {
-                    color: '#fff',
-                },
             })
         }
 
@@ -191,9 +185,6 @@ export const getters: GetterTree<ServerHistoryState, any> = {
                     value: 1,
                     itemStyle: itemStyle,
                     showInTable: !rootState.gui?.view.history.hidePrintStatus.includes(current.status),
-                    label: {
-                        color: '#fff',
-                    },
                 })
             }
         })
diff --git a/src/store/server/history/types.ts b/src/store/server/history/types.ts
index ada84d13b..2c36f048c 100644
--- a/src/store/server/history/types.ts
+++ b/src/store/server/history/types.ts
@@ -37,7 +37,4 @@ export interface ServerHistoryStateAllPrintStatusEntry {
         borderWidth: number
         borderRadius: number
     }
-    label: {
-        color: string
-    }
 }
diff --git a/src/store/variables.ts b/src/store/variables.ts
index df540bde7..86ce03e91 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -1,3 +1,4 @@
+export const defaultTheme = 'dark'
 export const defaultLogoColor = '#D41216'
 export const defaultPrimaryColor = '#2196f3'
 

From 2e3affd9d11bece37dfa6d167fc531b3d044a4bc Mon Sep 17 00:00:00 2001
From: big boy <enj0ynet@outlook.com>
Date: Sun, 15 Oct 2023 19:59:13 +0100
Subject: [PATCH 02/22] Load default theme from config.json, conditional dark
 attributes, light theme adjustments, further theme mixin coverage of extant
 default dark styling, charts reactive to theme switch

---
 public/config.json                            |   1 +
 public/img/sidebar-background-light.svg       | 206 ++++++++++++++++++
 remote/config.json                            |   1 +
 src/App.vue                                   |   5 +-
 src/components/TheConnectingDialog.vue        |   8 +-
 src/components/TheEditor.vue                  |   5 +-
 src/components/TheSidebar.vue                 |  23 +-
 .../TheTimelapseRenderingSnackbar.vue         |  21 +-
 src/components/TheTopbar.vue                  |  12 +-
 src/components/TheUpdateDialog.vue            |   5 +-
 src/components/TheUploadSnackbar.vue          |   5 +-
 .../charts/HistoryAllPrintStatusChart.vue     |  12 +-
 .../charts/HistoryFilamentUsage.vue           |  10 +-
 src/components/charts/HistoryPrinttimeAvg.vue |  10 +-
 src/components/charts/TempChart.vue           |   3 +-
 src/components/mixins/theme.ts                |  13 ++
 .../panels/Machine/ConfigFilesPanel.vue       |   9 +-
 src/components/panels/StatusPanel.vue         |   5 +-
 .../settings/SettingsMacrosTabExpert.vue      |  15 +-
 .../settings/SettingsNavigationTab.vue        |  12 +-
 .../settings/SettingsNavigationTabItem.vue    |  11 +-
 src/components/ui/Panel.vue                   |   7 +-
 src/main.ts                                   |  36 +--
 src/plugins/vuetify.ts                        |   6 -
 src/store/actions.ts                          |   2 +-
 src/store/files/getters.ts                    |   4 +-
 src/store/types.ts                            |   1 +
 27 files changed, 340 insertions(+), 108 deletions(-)
 create mode 100644 public/img/sidebar-background-light.svg

diff --git a/public/config.json b/public/config.json
index 26ac427f1..cdc1db4a6 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,5 +1,6 @@
 {
     "defaultLocale": "en",
+    "defaultTheme": "dark",
     "hostname": null,
     "port": null,
     "instancesDB": "moonraker",
diff --git a/public/img/sidebar-background-light.svg b/public/img/sidebar-background-light.svg
new file mode 100644
index 000000000..805f24268
--- /dev/null
+++ b/public/img/sidebar-background-light.svg
@@ -0,0 +1,206 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   enable-background="new 0 0 421.2 842.2"
+   version="1.1"
+   viewBox="0 0 421.2 842.2"
+   id="svg77"
+   sodipodi:docname="sidebar-background-light.svg"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   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">
+  <defs
+     id="defs81" />
+  <sodipodi:namedview
+     id="namedview79"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.92139633"
+     inkscape:cx="20.078222"
+     inkscape:cy="421.10001"
+     inkscape:window-width="1920"
+     inkscape:window-height="974"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg77" />
+  <linearGradient
+     id="a"
+     x1="-87.028"
+     x2="-86.028"
+     y1="841.97"
+     y2="841.97"
+     gradientTransform="matrix(-343.95 -596.42 -596.42 343.95 472648 -340719)"
+     gradientUnits="userSpaceOnUse">
+    <stop
+       stop-color="#080808"
+       offset="0"
+       id="stop2" />
+    <stop
+       stop-color="#242424"
+       offset="1"
+       id="stop4" />
+  </linearGradient>
+  <rect
+     x=".1"
+     y=".1"
+     width="421.1"
+     height="842.1"
+     fill="#e1e1e1"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="7.5591"
+     style="mix-blend-mode:luminosity;fill:#ffffff;fill-opacity:1"
+     id="rect7" />
+  <g
+     clip-rule="evenodd"
+     fill-rule="evenodd"
+     style="mix-blend-mode:exclusion"
+     id="g75">
+    <path
+       d="m0.1 0.1h420.9v841.9h-420.9z"
+       fill="url(#a)"
+       stroke="#000"
+       stroke-linecap="round"
+       stroke-linejoin="round"
+       stroke-miterlimit="3.1571"
+       stroke-width=".2736"
+       id="path9" />
+    <path
+       d="m147 152.1-146.9-152h130z"
+       fill="#242424"
+       id="path11" />
+    <path
+       d="m147 152.1-146.9-152v106.7z"
+       fill="#252525"
+       id="path13" />
+    <path
+       d="m147 152.1v62.7l-146.9-80.5v-27.5z"
+       fill="#222"
+       id="path15" />
+    <path
+       d="m0.1 268.5 146.9-53.7-146.9-80.5z"
+       fill="#242424"
+       id="path17" />
+    <path
+       d="m0.1 268.5 146.9-53.7-47.9 206.3z"
+       fill="#1f1f1f"
+       id="path19" />
+    <path
+       d="m0.1 268.5v201l8.4 2.1 90.5-50.5z"
+       fill="#1f1f1f"
+       id="path21" />
+    <path
+       d="m33.8 528.4-25.2-56.8 90.5-50.5z"
+       fill="#1a1a1a"
+       id="path23" />
+    <path
+       d="m33.8 528.4 204.2 19-138.9-126.3z"
+       fill="#181818"
+       id="path25" />
+    <path
+       d="m33.8 528.4 204.2 19-124.2 84.2z"
+       fill="#161616"
+       id="path27" />
+    <path
+       d="m33.8 528.4h-33.7v189.4l113.7-86.3z"
+       fill="#191919"
+       id="path29" />
+    <path
+       d="m135.9 732.6-102.1 109.4h-33.7v-124.2l113.7-86.3z"
+       fill="#161616"
+       id="path31" />
+    <path
+       d="m135.9 732.6 137.9-14.7-35.8-170.5-124.2 84.2z"
+       fill="#111"
+       id="path33" />
+    <path
+       d="m135.9 732.6 137.9-14.7-16.9 124.1h-121z"
+       fill="#0e0e0e"
+       id="path35" />
+    <path
+       d="m421.1 799.9-147.3-82.1-16.9 124.2h164.2z"
+       fill="#080808"
+       id="path37" />
+    <path
+       d="m421.1 799.9-147.3-82.1 147.3-128.4z"
+       fill="#070707"
+       id="path39" />
+    <path
+       d="m135.9 732.6-102.1 109.4h102.1z"
+       fill="#121212"
+       id="path41" />
+    <path
+       d="m286.4 395.8-48.4 151.6-138.9-126.3z"
+       fill="#151515"
+       id="path43" />
+    <path
+       d="m286.4 395.8-48.4 151.6 160-126.3z"
+       fill="#111"
+       id="path45" />
+    <path
+       d="m273.8 717.8-35.8-170.4 160-126.3 23.2 37.9v130.5z"
+       fill="#0d0d0d"
+       id="path47" />
+    <path
+       d="m33.8 528.4-25.2-56.8-8.4-2.1v58.9z"
+       fill="#1d1d1d"
+       id="path49" />
+    <path
+       d="m147 152.1 133.5-17.8-99.3-134.2h-51z"
+       fill="#1e1e1e"
+       id="path51" />
+    <path
+       d="m147 152.1 133.5-17.8-133.5 80.5z"
+       fill="#1b1b1b"
+       id="path53" />
+    <path
+       d="m290.6 303.2-10.1-168.9-133.5 80.5z"
+       fill="#181818"
+       id="path55" />
+    <path
+       d="m290.6 303.2-191.5 117.9 47.9-206.3z"
+       fill="#191919"
+       id="path57" />
+    <path
+       d="m290.6 303.2-191.5 117.9 187.3-25.3z"
+       fill="#161616"
+       id="path59" />
+    <path
+       d="m290.6 303.2 107.3 117.9-111.6-25.3z"
+       fill="#111"
+       id="path61" />
+    <path
+       d="m290.6 303.2 107.3 117.9 23.2-40.5v-65.8z"
+       fill="#101010"
+       id="path63" />
+    <path
+       d="m421.1 459-23.2-37.9 23.2-40.5z"
+       fill="#0c0c0c"
+       fill-opacity=".95"
+       id="path65" />
+    <path
+       d="m325.9 0.1-45.4 134.2-99.3-134.2z"
+       fill="#1c1c1c"
+       id="path67" />
+    <path
+       d="m325.9 0.1-45.4 134.2 140.6-24v-110.2z"
+       fill="#151515"
+       id="path69" />
+    <path
+       d="m421.1 284.8-140.6-150.5 140.6-24z"
+       fill="#111"
+       id="path71" />
+    <path
+       d="m421.1 284.8-140.6-150.5 10.1 168.9 130.5 11.6z"
+       fill="#131313"
+       id="path73" />
+  </g>
+</svg>
diff --git a/remote/config.json b/remote/config.json
index 1ac52bb39..c00849b08 100644
--- a/remote/config.json
+++ b/remote/config.json
@@ -1,5 +1,6 @@
 {
     "defaultLocale": "en",
+    "defaultTheme": "dark",
     "hostname": null,
     "port": null,
     "instancesDB": "browser",
diff --git a/src/App.vue b/src/App.vue
index a7e0aba90..c7411bca9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-app :style="cssVars">
+    <v-app :dark="darkAttribute" :style="cssVars">
         <template v-if="socketIsConnected && guiIsReady">
             <the-sidebar />
             <the-topbar />
@@ -27,6 +27,7 @@
 import Component from 'vue-class-component'
 import TheSidebar from '@/components/TheSidebar.vue'
 import BaseMixin from '@/components/mixins/base'
+import ThemeMixin from './components/mixins/theme'
 import TheTopbar from '@/components/TheTopbar.vue'
 import { Mixins, Watch } from 'vue-property-decorator'
 import TheUpdateDialog from '@/components/TheUpdateDialog.vue'
@@ -59,7 +60,7 @@ Component.registerHooks(['metaInfo'])
         TheScrewsTiltAdjustDialog,
     },
 })
-export default class App extends Mixins(BaseMixin) {
+export default class App extends Mixins(BaseMixin, ThemeMixin) {
     public metaInfo(): any {
         let title = this.$store.getters['getTitle']
 
diff --git a/src/components/TheConnectingDialog.vue b/src/components/TheConnectingDialog.vue
index e847a05b8..a7dcdc8ee 100644
--- a/src/components/TheConnectingDialog.vue
+++ b/src/components/TheConnectingDialog.vue
@@ -2,7 +2,7 @@
 
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
-        <v-card>
+        <v-card :dark="darkAttribute">
             <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 indeterminate></v-progress-linear>
+                <v-progress-linear :color="progressBarColor" indeterminate></v-progress-linear>
             </v-card-text>
         </v-card>
     </v-dialog>
@@ -38,6 +38,8 @@
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+
+import ThemeMixin from '@/components/mixins/theme'
 import ConnectionStatus from '@/components/ui/ConnectionStatus.vue'
 import { mdiConnection } from '@mdi/js'
 
@@ -46,7 +48,7 @@ import { mdiConnection } from '@mdi/js'
         ConnectionStatus,
     },
 })
-export default class TheConnectingDialog extends Mixins(BaseMixin) {
+export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
     mdiConnection = mdiConnection
 
     counter = 0
diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index 2a653650e..cc3fedb0f 100644
--- a/src/components/TheEditor.vue
+++ b/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>
+        <v-snackbar v-model="loaderBool" :timeout="-1" :value="true" fixed right bottom :dark="darkAttribute">
             <div>
                 {{ snackbarHeadline }}
                 <br />
@@ -122,6 +122,7 @@
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import ThemeMixin from '@/components/mixins/theme'
 import { capitalize, formatFilesize, windowBeforeUnloadFunction } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
 import { availableKlipperConfigReferenceTranslations } from '@/store/variables'
@@ -141,7 +142,7 @@ import type Codemirror from '@/components/inputs/Codemirror.vue'
 @Component({
     components: { Panel, CodemirrorAsync },
 })
-export default class TheEditor extends Mixins(BaseMixin) {
+export default class TheEditor extends Mixins(BaseMixin, ThemeMixin) {
     private dialogConfirmChange = false
 
     formatFilesize = formatFilesize
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index ad212ee98..533281d93 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -9,7 +9,7 @@
         app
         :style="sidebarCssVars">
         <template #img>
-            <v-img :src="sidebarBackground" height="100%" :style="backgroundImageStyle" />
+            <v-img :src="sidebarBackground" height="100%" />
         </template>
 
         <overlay-scrollbars class="nav-scrollbar">
@@ -56,7 +56,6 @@ 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: {
@@ -83,7 +82,8 @@ export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
     }
 
     get sidebarBackground(): string {
-        return this.$store.getters['files/getSidebarBackground']
+        const defaultBg = this.$vuetify.theme.dark ? '/img/sidebar-background.svg' : '/img/sidebar-background-light.svg'
+        return this.$store.getters['files/getCustomSidebarBackground'] ?? defaultBg
     }
 
     get currentPage(): string {
@@ -94,17 +94,14 @@ export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
         return !this.isMobile && this.$vuetify.breakpoint.mdAndDown
     }
 
-    get sidebarCssVars(): CSSProperties {
-        let vars: CSSProperties = {
-            ...(this.boolNaviTemp && { top: `${topbarHeight}px !important` }),
-            ...(this.boolNaviTemp && { paddingBottom: `${topbarHeight}px` }),
+    get sidebarCssVars(): any {
+        if (this.boolNaviTemp) {
+            return {
+                top: `${topbarHeight}px !important`,
+                'padding-bottom': `${topbarHeight}px`,
+            }
         }
-
-        return vars
-    }
-
-    get backgroundImageStyle(): CSSProperties {
-        return !this.$vuetify.theme.dark ? { filter: 'invert(1)' } : {}
+        return {}
     }
 
     get sidebarLogo(): string {
diff --git a/src/components/TheTimelapseRenderingSnackbar.vue b/src/components/TheTimelapseRenderingSnackbar.vue
index 074994c5b..2f903e275 100644
--- a/src/components/TheTimelapseRenderingSnackbar.vue
+++ b/src/components/TheTimelapseRenderingSnackbar.vue
@@ -2,12 +2,26 @@
 
 <template>
     <div>
-        <v-snackbar v-model="boolShowDialogRunning" :timeout="-1" :value="true" fixed right bottom>
+        <v-snackbar
+            v-model="boolShowDialogRunning"
+            :timeout="-1"
+            :value="true"
+            fixed
+            right
+            bottom
+            :dark="darkAttribute">
             <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>
+        <v-snackbar
+            v-model="boolShowDialogSuccess"
+            :timeout="5000"
+            :value="true"
+            fixed
+            right
+            bottom
+            :dark="darkAttribute">
             <div>
                 {{ $t('Timelapse.TimelapseRenderingSuccessful') }}
                 <br />
@@ -21,11 +35,12 @@
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import ThemeMixin from '@/components/mixins/theme'
 
 @Component({
     components: {},
 })
-export default class TheTimelapseRenderingSnackbar extends Mixins(BaseMixin) {
+export default class TheTimelapseRenderingSnackbar extends Mixins(BaseMixin, ThemeMixin) {
     get boolShowDialogRunning() {
         return this.status === 'running'
     }
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index ee9225313..1de41bfa4 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -70,7 +70,14 @@
             <the-settings-menu />
             <the-top-corner-menu />
         </v-app-bar>
-        <v-snackbar v-model="uploadSnackbar.status" :timeout="-1" :value="true" fixed right bottom>
+        <v-snackbar
+            v-model="uploadSnackbar.status"
+            :timeout="-1"
+            :value="true"
+            fixed
+            right
+            bottom
+            :dark="darkAttribute">
             <strong>{{ $t('App.TopBar.Uploading') }} {{ uploadSnackbar.filename }}</strong>
             <br />
             {{ Math.round(uploadSnackbar.percent) }} % @ {{ formatFilesize(Math.round(uploadSnackbar.speed)) }}/s
@@ -108,6 +115,7 @@
 <script lang="ts">
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import ThemeMixin from '@/components/mixins/theme'
 import { validGcodeExtensions } from '@/store/variables'
 import Component from 'vue-class-component'
 import axios from 'axios'
@@ -144,7 +152,7 @@ type uploadSnackbar = {
         TheNotificationMenu,
     },
 })
-export default class TheTopbar extends Mixins(BaseMixin) {
+export default class TheTopbar extends Mixins(BaseMixin, ThemeMixin) {
     mdiAlertOctagonOutline = mdiAlertOctagonOutline
     mdiContentSave = mdiContentSave
     mdiFileUpload = mdiFileUpload
diff --git a/src/components/TheUpdateDialog.vue b/src/components/TheUpdateDialog.vue
index 966652f20..c624d2faf 100644
--- a/src/components/TheUpdateDialog.vue
+++ b/src/components/TheUpdateDialog.vue
@@ -17,7 +17,7 @@
 
 <template>
     <v-dialog :value="application !== ''" persistent max-width="800" class="mx-0">
-        <v-card :loading="!complete">
+        <v-card :dark="darkAttribute" :loading="!complete">
             <template slot="progress">
                 <v-progress-linear color="primary" indeterminate></v-progress-linear>
             </template>
@@ -91,12 +91,13 @@
 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 { mdiUpdate } from '@mdi/js'
 
 @Component({
     components: {},
 })
-export default class TheUpdateDialog extends Mixins(BaseMixin) {
+export default class TheUpdateDialog extends Mixins(BaseMixin, ThemeMixin) {
     mdiUpdate = mdiUpdate
 
     declare $refs: {
diff --git a/src/components/TheUploadSnackbar.vue b/src/components/TheUploadSnackbar.vue
index e097fd9e0..37a32c934 100644
--- a/src/components/TheUploadSnackbar.vue
+++ b/src/components/TheUploadSnackbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-snackbar v-if="show" :timeout="-1" :value="true" fixed right bottom dark>
+    <v-snackbar v-if="show" :timeout="-1" :value="true" fixed right bottom :dark="darkAttribute">
         <span v-if="maxNumber > 1" class="mr-1">({{ currentNumber }}/{{ maxNumber }})</span>
         <strong>{{ $t('Editor.Uploading') + ' ' + filename }}</strong>
         <br />
@@ -18,13 +18,14 @@
 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 { mdiClose } from '@mdi/js'
 import { formatFilesize } from '@/plugins/helpers'
 
 @Component({
     components: {},
 })
-export default class TheUploadSnackbar extends Mixins(BaseMixin) {
+export default class TheUploadSnackbar extends Mixins(BaseMixin, ThemeMixin) {
     mdiClose = mdiClose
     formatFilesize = formatFilesize
 
diff --git a/src/components/charts/HistoryAllPrintStatusChart.vue b/src/components/charts/HistoryAllPrintStatusChart.vue
index 46026bf2d..d849d7706 100644
--- a/src/components/charts/HistoryAllPrintStatusChart.vue
+++ b/src/components/charts/HistoryAllPrintStatusChart.vue
@@ -25,7 +25,7 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
         historyAllPrintStatus: any
     }
 
-    private get chartOptions(): ECBasicOption {
+    get chartOptions(): ECBasicOption {
         return {
             animation: false,
             grid: {
@@ -41,15 +41,14 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
             series: [
                 {
                     type: 'pie',
-                    data: [],
+                    data: this.printStatusArray,
                     avoidLabelOverlap: false,
                     radius: ['35%', '60%'],
                     emphasis: {
                         itemStyle: {
                             shadowBlur: 10,
                             shadowOffsetX: 0,
-                            // shadowColor: 'rgba(0, 0, 0, 0.5)',
-                            shadowColor: 'red',
+                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                         },
                     },
                     label: {
@@ -89,11 +88,6 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
         return this.$refs.historyAllPrintStatus?.chart ?? null
     }
 
-    mounted() {
-        this.chartOptions.series[0].data = this.printStatusArray
-        this.chart?.setOption(this.chartOptions)
-    }
-
     beforeDestroy() {
         if (typeof window === 'undefined') return
         if (this.chart) this.chart.dispose()
diff --git a/src/components/charts/HistoryFilamentUsage.vue b/src/components/charts/HistoryFilamentUsage.vue
index ab76d8a31..c83bcc9b9 100644
--- a/src/components/charts/HistoryFilamentUsage.vue
+++ b/src/components/charts/HistoryFilamentUsage.vue
@@ -21,7 +21,7 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin, ThemeMixin) {
         historyFilamentUsage: any
     }
 
-    private chartOptions(): any {
+    get chartOptions(): any {
         return {
             animation: false,
             grid: {
@@ -100,7 +100,7 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin, ThemeMixin) {
             series: [
                 {
                     type: 'bar',
-                    data: [],
+                    data: this.filamentUsageArray,
                     showSymbol: false,
                 },
             ],
@@ -115,12 +115,6 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin, ThemeMixin) {
         return this.$refs.historyFilamentUsage?.chart ?? null
     }
 
-    mounted() {
-        let chart = this.chartOptions()
-        chart.series[0].data = this.filamentUsageArray
-        this.chart?.setOption(chart)
-    }
-
     beforeDestroy() {
         if (typeof window === 'undefined') return
         if (this.chart) this.chart.dispose()
diff --git a/src/components/charts/HistoryPrinttimeAvg.vue b/src/components/charts/HistoryPrinttimeAvg.vue
index 1ddc882d3..a45daf2ec 100644
--- a/src/components/charts/HistoryPrinttimeAvg.vue
+++ b/src/components/charts/HistoryPrinttimeAvg.vue
@@ -22,7 +22,7 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin, ThemeMixin) {
         historyPrinttimeAvg: any
     }
 
-    private chartOptions(): any {
+    get chartOptions(): any {
         return {
             animation: false,
             grid: {
@@ -83,7 +83,7 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin, ThemeMixin) {
             series: [
                 {
                     type: 'bar',
-                    data: [],
+                    data: this.printtimeAvgArray,
                     itemStyle: {
                         color: '#BDBDBD',
                     },
@@ -100,12 +100,6 @@ export default class HistoryPrinttimeAvg extends Mixins(BaseMixin, ThemeMixin) {
         return this.$refs.historyPrinttimeAvg?.chart ?? null
     }
 
-    mounted() {
-        let chart = this.chartOptions()
-        chart.series[0].data = this.printtimeAvgArray
-        this.chart?.setOption(chart)
-    }
-
     beforeDestroy() {
         if (typeof window === 'undefined') return
         if (this.chart) this.chart.dispose()
diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index b27a76230..72b90f473 100644
--- a/src/components/charts/TempChart.vue
+++ b/src/components/charts/TempChart.vue
@@ -277,11 +277,12 @@ export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
         if (datasets.length) {
             let outputTime = datasets[0]['axisValueLabel']
             outputTime = outputTime.substring(outputTime.indexOf(' '))
+            let theme = $vuetify.theme.dark ? 'theme-dark' : ''
 
             output +=
                 '<div class="row">' +
                 '<div class="col py-1" style=\'border-bottom: 1px solid rgba(255, 255, 255, 0.24);\'>' +
-                '<span class="v-icon mdi theme-dark" style="margin-right: 5px;">' +
+                `<span class="v-icon mdi ${theme}" style="margin-right: 5px;">` +
                 '<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" viewBox="0 0 24 24" class="v-icon__svg" style="font-size: 12px; width: 12px; height: 12px;">' +
                 `<path d="${mdiClock}">` +
                 '</path>' +
diff --git a/src/components/mixins/theme.ts b/src/components/mixins/theme.ts
index f1eae2136..d34deb5aa 100644
--- a/src/components/mixins/theme.ts
+++ b/src/components/mixins/theme.ts
@@ -31,4 +31,17 @@ export default class ThemeMixin extends Vue {
     get machineButtonCol() {
         return this.$vuetify.theme.dark ? 'grey darken-3' : 'grey lighten-1'
     }
+
+    get draggableBgStyle() {
+        const col = this.$vuetify.theme.dark ? '#282828' : '#e7e7e7'
+        return `background-color: ${col}`
+    }
+
+    get progressBarColor() {
+        return this.$vuetify.theme.dark ? 'white' : 'primary'
+    }
+
+    get darkAttribute() {
+        return this.$vuetify.theme.dark
+    }
 }
diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
index 24c22b12f..86f57df1a 100644
--- a/src/components/panels/Machine/ConfigFilesPanel.vue
+++ b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -512,7 +512,14 @@
             </panel>
         </v-dialog>
 
-        <v-snackbar v-model="uploadSnackbar.status" :timeout="-1" :value="true" fixed right bottom>
+        <v-snackbar
+            v-model="uploadSnackbar.status"
+            :timeout="-1"
+            :value="true"
+            fixed
+            right
+            bottom
+            :dark="darkAttribute">
             <span v-if="uploadSnackbar.max > 1" class="mr-1">
                 ({{ uploadSnackbar.number }}/{{ uploadSnackbar.max }})
             </span>
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 24cf4eb80..26e206f2b 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -88,7 +88,7 @@
                 </v-container>
                 <v-divider class="mt-0 mb-0"></v-divider>
             </template>
-            <v-tabs v-model="activeTab" fixed-tabs>
+            <v-tabs v-model="activeTab" fixed-tabs :dark="darkAttribute">
                 <v-tab v-if="current_filename" href="#status">{{ $t('Panels.StatusPanel.Status') }}</v-tab>
                 <v-tab href="#files">{{ $t('Panels.StatusPanel.Files') }}</v-tab>
                 <v-tab href="#jobqueue">{{ $t('Panels.StatusPanel.Jobqueue', { count: jobsCount }) }}</v-tab>
@@ -113,6 +113,7 @@
 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 MinSettingsPanel from '@/components/panels/MinSettingsPanel.vue'
 import KlippyStatePanel from '@/components/panels/KlippyStatePanel.vue'
 import StatusPanelPrintstatus from '@/components/panels/Status/Printstatus.vue'
@@ -151,7 +152,7 @@ import { PrinterStateMacro } from '@/store/printer/types'
         StatusPanelPauseAtLayerDialog,
     },
 })
-export default class StatusPanel extends Mixins(BaseMixin) {
+export default class StatusPanel extends Mixins(BaseMixin, ThemeMixin) {
     mdiInformation = mdiInformation
     mdiMessageProcessingOutline = mdiMessageProcessingOutline
     mdiCloseCircle = mdiCloseCircle
diff --git a/src/components/settings/SettingsMacrosTabExpert.vue b/src/components/settings/SettingsMacrosTabExpert.vue
index fb04efba7..b953637a8 100644
--- a/src/components/settings/SettingsMacrosTabExpert.vue
+++ b/src/components/settings/SettingsMacrosTabExpert.vue
@@ -141,10 +141,8 @@
                         ghost-class="ghost"
                         group="macros"
                         @change="updateMacroOrder">
-                        <v-row
-                            v-for="(macro, index) in editGroupMacros"
-                            :key="macro.name"
-                            class="dragable-item my-2 mx-0">
+                        <v-row v-for="(macro, index) in editGroupMacros" :key="macro.name" class="my-2 mx-0">
+                            :style="draggableBgStyle"
                             <v-col class="col-auto pr-0 d-flex py-2">
                                 <v-icon class="handle">{{ mdiDragVertical }}</v-icon>
                             </v-col>
@@ -292,6 +290,7 @@
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
+import ThemeMixin from '@/components/mixins/theme'
 import draggable from 'vuedraggable'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import { Debounce } from 'vue-debounce-decorator'
@@ -311,7 +310,7 @@ import {
 @Component({
     components: { SettingsRow, draggable },
 })
-export default class SettingsMacrosTabExpert extends Mixins(BaseMixin) {
+export default class SettingsMacrosTabExpert extends Mixins(BaseMixin, ThemeMixin) {
     /**
      * Icons
      */
@@ -547,9 +546,3 @@ export default class SettingsMacrosTabExpert extends Mixins(BaseMixin) {
     }
 }
 </script>
-
-<style scoped>
-.dragable-item {
-    background-color: #282828;
-}
-</style>
diff --git a/src/components/settings/SettingsNavigationTab.vue b/src/components/settings/SettingsNavigationTab.vue
index bb4d727cd..c70c2b729 100644
--- a/src/components/settings/SettingsNavigationTab.vue
+++ b/src/components/settings/SettingsNavigationTab.vue
@@ -6,7 +6,8 @@
                 <settings-navigation-tab-item
                     v-for="(naviPoint, index) in sortableNaviPoints"
                     :key="index"
-                    class="dragable-item my-2 mx-0"
+                    class="my-2 mx-0"
+                    :style="draggableBgStyle"
                     :navi-point="naviPoint" />
             </draggable>
         </v-card-text>
@@ -17,6 +18,7 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import NavigationMixin, { NaviPoint } from '@/components/mixins/navigation'
+import ThemeMixin from '@/components/mixins/theme'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import draggable from 'vuedraggable'
 import SettingsNavigationTabItem from '@/components/settings/SettingsNavigationTabItem.vue'
@@ -24,7 +26,7 @@ import SettingsNavigationTabItem from '@/components/settings/SettingsNavigationT
 @Component({
     components: { SettingsNavigationTabItem, SettingsRow, draggable },
 })
-export default class SettingsNavigationTab extends Mixins(NavigationMixin, BaseMixin) {
+export default class SettingsNavigationTab extends Mixins(NavigationMixin, BaseMixin, ThemeMixin) {
     get sortableNaviPoints() {
         return this.naviPoints.filter((naviPoint) => naviPoint.position > 0)
     }
@@ -45,9 +47,3 @@ export default class SettingsNavigationTab extends Mixins(NavigationMixin, BaseM
     }
 }
 </script>
-
-<style scoped>
-.dragable-item {
-    background-color: #282828;
-}
-</style>
diff --git a/src/components/settings/SettingsNavigationTabItem.vue b/src/components/settings/SettingsNavigationTabItem.vue
index 58b041333..8a24b119c 100644
--- a/src/components/settings/SettingsNavigationTabItem.vue
+++ b/src/components/settings/SettingsNavigationTabItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-row class="dragable-item my-2 mx-0">
+    <v-row class="my-2 mx-0" :style="draggableBgStyle">
         <v-col class="col-auto pr-0 d-flex py-2">
             <v-icon class="handle">{{ mdiDragVertical }}</v-icon>
         </v-col>
@@ -15,6 +15,7 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import NavigationMixin, { NaviPoint } from '@/components/mixins/navigation'
+import ThemeMixin from '@/components/mixins/theme'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import draggable from 'vuedraggable'
 import { mdiDragVertical, mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@mdi/js'
@@ -22,7 +23,7 @@ import { mdiDragVertical, mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@md
 @Component({
     components: { SettingsRow, draggable },
 })
-export default class SettingsNavigationTab extends Mixins(NavigationMixin, BaseMixin) {
+export default class SettingsNavigationTab extends Mixins(NavigationMixin, BaseMixin, ThemeMixin) {
     mdiDragVertical = mdiDragVertical
 
     @Prop({ type: Object, required: true }) naviPoint!: NaviPoint
@@ -54,9 +55,3 @@ export default class SettingsNavigationTab extends Mixins(NavigationMixin, BaseM
     }
 }
 </script>
-
-<style scoped>
-.dragable-item {
-    background-color: #282828;
-}
-</style>
diff --git a/src/components/ui/Panel.vue b/src/components/ui/Panel.vue
index e54c3b40f..aa2b63d7b 100644
--- a/src/components/ui/Panel.vue
+++ b/src/components/ui/Panel.vue
@@ -8,7 +8,8 @@
             :color="toolbarColor"
             :class="getToolbarClass"
             :height="panelToolbarHeight"
-            class="panel-toolbar">
+            class="panel-toolbar"
+            :style="additionalStyle">
             <slot name="buttons-left" />
             <v-toolbar-title class="d-flex align-center">
                 <slot v-if="hasIconSlot" name="icon" />
@@ -80,6 +81,10 @@ export default class Panel extends Mixins(BaseMixin) {
 
         return output
     }
+
+    get additionalStyle() {
+        return this.$vuetify.theme.dark ? '' : 'border-bottom: 1px solid #A8A8A8'
+    }
 }
 </script>
 
diff --git a/src/main.ts b/src/main.ts
index ccc1c4d82..901e776a1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -66,6 +66,7 @@ Vue.component('EChart', ECharts)
 import 'vue-resize/dist/vue-resize.css'
 // @ts-ignore
 import VueResize from 'vue-resize'
+import { defaultTheme } from './store/variables'
 Vue.use(VueResize)
 
 const initLoad = async () => {
@@ -75,24 +76,33 @@ const initLoad = async () => {
         .then(async (file) => {
             window.console.debug('Loaded config.json')
 
-            await store.dispatch('importConfigJson', file)
+            store.dispatch('importConfigJson', file)
             if ('defaultLocale' in file) i18n.locale = file.defaultLocale
+
+            // Handle theme outside of store init and before vue mount for consistency in dialog
+            let theme = file.defaultTheme ?? defaultTheme
+            const uiSettingsUrl =
+                store.getters['socket/getUrl'] + '/server/database/item?namespace=mainsail&key=uiSettings'
+            const response = await fetch(uiSettingsUrl)
+                .then((response) => response?.json())
+                .catch(() => undefined)
+            if (response.result?.value && Object.keys(response.result?.value).includes('theme'))
+                theme = response.result?.value['theme']
+            vuetify.framework.theme.dark = theme == 'light' ? false : true
         })
-        .catch(() => {
-            window.console.error('config.json not found or cannot be decoded!')
-        })
+        .catch(() => window.console.error('config.json not found or cannot be decoded!'))
 
     const url = store.getters['socket/getWebsocketUrl']
     Vue.use(WebSocketPlugin, { url, store })
     if (store?.state?.instancesDB === 'moonraker') Vue.$socket.connect()
 }
 
-initLoad()
-
-new Vue({
-    vuetify,
-    router,
-    store,
-    i18n,
-    render: (h) => h(App),
-}).$mount('#app')
+initLoad().then(() =>
+    new Vue({
+        vuetify,
+        router,
+        store,
+        i18n,
+        render: (h) => h(App),
+    }).$mount('#app')
+)
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 1f6eb8f68..f6abac99e 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -9,12 +9,6 @@ Vue.use(Vuetify, {
 export default new Vuetify({
     theme: {
         dark: true,
-        themes: {
-            dark: {
-                panel: '#1e1e1e',
-                toolbar: '#272727',
-            },
-        },
         options: { customProperties: true },
     },
     icons: {
diff --git a/src/store/actions.ts b/src/store/actions.ts
index c43520e9b..07197c4d5 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -29,7 +29,7 @@ export const actions: ActionTree<RootState, RootState> = {
     /**
      * This function will parse the config.json content and config mainsail
      */
-    importConfigJson({ commit }, payload: ConfigJson) {
+    async importConfigJson({ commit }, payload: ConfigJson) {
         type RootStateInstancesDbType = 'moonraker' | 'browser' | 'json'
         let instancesDB: RootStateInstancesDbType = payload.instancesDB ?? 'moonraker'
         if (import.meta.env.VUE_APP_INSTANCES_DB)
diff --git a/src/store/files/getters.ts b/src/store/files/getters.ts
index 829d01db1..e55b4deae 100644
--- a/src/store/files/getters.ts
+++ b/src/store/files/getters.ts
@@ -216,11 +216,11 @@ export const getters: GetterTree<FileState, any> = {
         return getters['getThemeFileUrl'](acceptName, acceptExtensions) ?? ''
     },
 
-    getSidebarBackground: (state, getters) => {
+    getCustomSidebarBackground: (state, getters) => {
         const acceptName = 'sidebar-background'
         const acceptExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg']
 
-        return getters['getThemeFileUrl'](acceptName, acceptExtensions) ?? '/img/sidebar-background.svg'
+        return getters['getThemeFileUrl'](acceptName, acceptExtensions) ?? null
     },
 
     getMainBackground: (state, getters) => {
diff --git a/src/store/types.ts b/src/store/types.ts
index 1c48ecfb7..b35b6f4a0 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -25,6 +25,7 @@ export interface RootStateDependency {
 }
 
 export interface ConfigJson {
+    defaultTheme?: 'dark' | 'light'
     hostname?: string | null
     port?: string | number | null
     instancesDB?: 'moonraker' | 'browser' | 'json'

From ff6f32fbe5b3efb6dd589f74240dca69fe83b566 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 10 Dec 2023 23:41:49 +0100
Subject: [PATCH 03/22] fix: remove moonraker db check in init process

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/main.ts | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index c0034ea58..269588c33 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -78,15 +78,8 @@ const initLoad = async () => {
         }
 
         // Handle theme outside of store init and before vue mount for consistency in dialog
-        let theme = file.defaultTheme ?? defaultTheme
-        const uiSettingsUrl =
-            store.getters['socket/getUrl'] + '/server/database/item?namespace=mainsail&key=uiSettings'
-        const response = await fetch(uiSettingsUrl)
-        .then((response) => response?.json())
-        .catch(() => undefined)
-        if (response.result?.value && Object.keys(response.result?.value).includes('theme'))
-            theme = response.result?.value['theme']
-        vuetify.framework.theme.dark = theme == 'light' ? false : true
+        const theme = file.defaultTheme ?? defaultTheme
+        vuetify.framework.theme.dark = theme !== 'light'
     } catch (e) {
         window.console.error('Failed to load config.json')
         window.console.error(e)

From 3e8f0eb716e24e28ce3e7c3d6cda171a0a7bbe8f Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 11 Dec 2023 21:43:35 +0100
Subject: [PATCH 04/22] refactor: remove unused dark attribute in v-card and
 v-app elements

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/App.vue                            | 2 +-
 src/components/TheConnectingDialog.vue | 2 +-
 src/components/TheUpdateDialog.vue     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 310b60785..b21e0bd6b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-app :dark="darkAttribute" :style="cssVars">
+    <v-app :style="cssVars">
         <template v-if="socketIsConnected && guiIsReady">
             <the-sidebar />
             <the-topbar />
diff --git a/src/components/TheConnectingDialog.vue b/src/components/TheConnectingDialog.vue
index a7dcdc8ee..190dd478f 100644
--- a/src/components/TheConnectingDialog.vue
+++ b/src/components/TheConnectingDialog.vue
@@ -2,7 +2,7 @@
 
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
-        <v-card :dark="darkAttribute">
+        <v-card>
             <v-toolbar flat dense>
                 <v-toolbar-title>
                     <span class="subheading">
diff --git a/src/components/TheUpdateDialog.vue b/src/components/TheUpdateDialog.vue
index c624d2faf..cc2926acb 100644
--- a/src/components/TheUpdateDialog.vue
+++ b/src/components/TheUpdateDialog.vue
@@ -17,7 +17,7 @@
 
 <template>
     <v-dialog :value="application !== ''" persistent max-width="800" class="mx-0">
-        <v-card :dark="darkAttribute" :loading="!complete">
+        <v-card :loading="!complete">
             <template slot="progress">
                 <v-progress-linear color="primary" indeterminate></v-progress-linear>
             </template>

From b725339e197f951d26486d30d2704d8fd0f38eab Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 11 Dec 2023 21:52:01 +0100
Subject: [PATCH 05/22] refactor: remove unused dark attribute in v-snackbar,
 v-tab

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/TheEditor.vue                   |  2 +-
 .../TheTimelapseRenderingSnackbar.vue          | 18 ++----------------
 src/components/TheTopbar.vue                   |  9 +--------
 src/components/TheUploadSnackbar.vue           |  2 +-
 .../panels/Machine/ConfigFilesPanel.vue        |  9 +--------
 src/components/panels/StatusPanel.vue          |  2 +-
 6 files changed, 7 insertions(+), 35 deletions(-)

diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index 3e4c45cff..3f0402b8b 100644
--- a/src/components/TheEditor.vue
+++ b/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="darkAttribute">
+        <v-snackbar v-model="loaderBool" :timeout="-1" :value="true" fixed right bottom>
             <div>
                 {{ snackbarHeadline }}
                 <br />
diff --git a/src/components/TheTimelapseRenderingSnackbar.vue b/src/components/TheTimelapseRenderingSnackbar.vue
index 2f903e275..5a508edcc 100644
--- a/src/components/TheTimelapseRenderingSnackbar.vue
+++ b/src/components/TheTimelapseRenderingSnackbar.vue
@@ -2,26 +2,12 @@
 
 <template>
     <div>
-        <v-snackbar
-            v-model="boolShowDialogRunning"
-            :timeout="-1"
-            :value="true"
-            fixed
-            right
-            bottom
-            :dark="darkAttribute">
+        <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="darkAttribute">
+        <v-snackbar v-model="boolShowDialogSuccess" :timeout="5000" :value="true" fixed right bottom>
             <div>
                 {{ $t('Timelapse.TimelapseRenderingSuccessful') }}
                 <br />
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index 1de41bfa4..282582e95 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -70,14 +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="darkAttribute">
+        <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
diff --git a/src/components/TheUploadSnackbar.vue b/src/components/TheUploadSnackbar.vue
index 37a32c934..07a96a25c 100644
--- a/src/components/TheUploadSnackbar.vue
+++ b/src/components/TheUploadSnackbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-snackbar v-if="show" :timeout="-1" :value="true" fixed right bottom :dark="darkAttribute">
+    <v-snackbar v-if="show" :timeout="-1" :value="true" fixed right bottom>
         <span v-if="maxNumber > 1" class="mr-1">({{ currentNumber }}/{{ maxNumber }})</span>
         <strong>{{ $t('Editor.Uploading') + ' ' + filename }}</strong>
         <br />
diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
index 58296bfba..23e2c8085 100644
--- a/src/components/panels/Machine/ConfigFilesPanel.vue
+++ b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -515,14 +515,7 @@
             </panel>
         </v-dialog>
 
-        <v-snackbar
-            v-model="uploadSnackbar.status"
-            :timeout="-1"
-            :value="true"
-            fixed
-            right
-            bottom
-            :dark="darkAttribute">
+        <v-snackbar v-model="uploadSnackbar.status" :timeout="-1" :value="true" fixed right bottom>
             <span v-if="uploadSnackbar.max > 1" class="mr-1">
                 ({{ uploadSnackbar.number }}/{{ uploadSnackbar.max }})
             </span>
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index beeda5685..7d8877fce 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -88,7 +88,7 @@
                 </v-container>
                 <v-divider class="mt-0 mb-0"></v-divider>
             </template>
-            <v-tabs v-model="activeTab" fixed-tabs :dark="darkAttribute">
+            <v-tabs v-model="activeTab" fixed-tabs>
                 <v-tab v-if="current_filename" href="#status">{{ $t('Panels.StatusPanel.Status') }}</v-tab>
                 <v-tab href="#files">{{ $t('Panels.StatusPanel.Files') }}</v-tab>
                 <v-tab href="#jobqueue">{{ $t('Panels.StatusPanel.Jobqueue', { count: jobsCount }) }}</v-tab>

From a11a94a138bdb4b87592edd951432f8750d32d05 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 11 Dec 2023 21:52:24 +0100
Subject: [PATCH 06/22] refactor: remove darkAttribute getter

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/mixins/theme.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/mixins/theme.ts b/src/components/mixins/theme.ts
index d34deb5aa..4b9b649a9 100644
--- a/src/components/mixins/theme.ts
+++ b/src/components/mixins/theme.ts
@@ -40,8 +40,4 @@ export default class ThemeMixin extends Vue {
     get progressBarColor() {
         return this.$vuetify.theme.dark ? 'white' : 'primary'
     }
-
-    get darkAttribute() {
-        return this.$vuetify.theme.dark
-    }
 }

From f90d910660769fc391e1be319dc4d32c1075e876 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 11 Dec 2023 22:48:15 +0100
Subject: [PATCH 07/22] fix: change color of scrollbars in theme--light

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/App.vue                |  6 +++++-
 src/assets/styles/page.css | 26 ++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index b21e0bd6b..0af7f9de4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -206,7 +206,11 @@ export default class App extends Mixins(BaseMixin, ThemeMixin) {
 
     @Watch('theme')
     themeChanged(newVal: string): void {
-        this.$vuetify.theme.dark = newVal == 'dark' ? true : false
+        const dark = newVal !== 'light'
+        this.$vuetify.theme.dark = dark
+
+        const doc = document.documentElement
+        doc.className = dark ? 'theme--dark' : 'theme--light'
     }
 
     drawFavicon(val: number): void {
diff --git a/src/assets/styles/page.css b/src/assets/styles/page.css
index 979b5d51e..fc3438e48 100644
--- a/src/assets/styles/page.css
+++ b/src/assets/styles/page.css
@@ -77,3 +77,29 @@ body {
     min-width: 100px;
     min-height: 100px;
 }
+
+/* Light theme */
+html.theme--light {
+    scrollbar-color: rgba(0, 0, 0, 0.55) #ffffff;
+}
+
+html.theme--light body {
+    background: #ffffff !important;
+}
+
+html.theme--light ::-webkit-scrollbar {
+    background-color: #ffffff;
+}
+
+html.theme--light ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-color: #ffffff;
+}
+
+html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+    background: rgba(0, 0, 0, 0.4) !important;
+}
+
+html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
+    background: rgba(0, 0, 0, 0.55) !important;
+}

From 08be2190a52d8e0fd0f7bcdf1d5e572cc3542eac Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 11 Dec 2023 22:51:50 +0100
Subject: [PATCH 08/22] fix: change border color of console entries in default
 size

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/assets/styles/page.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/assets/styles/page.css b/src/assets/styles/page.css
index fc3438e48..fe61b1ee7 100644
--- a/src/assets/styles/page.css
+++ b/src/assets/styles/page.css
@@ -103,3 +103,7 @@ html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-sc
 html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
     background: rgba(0, 0, 0, 0.55) !important;
 }
+
+html.theme--light .consoleTableRow.default + .consoleTableRow .col {
+    border-top-color: rgba(0, 0, 0, 0.12) !important;
+}

From b125f74ba0fd6a584f92087d1473c35db0cd0a6e Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 22:33:28 +0100
Subject: [PATCH 09/22] fix: fix issue in SettingsMacrosTabExpert

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/settings/SettingsMacrosTabExpert.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/SettingsMacrosTabExpert.vue b/src/components/settings/SettingsMacrosTabExpert.vue
index b953637a8..c7a5db1a6 100644
--- a/src/components/settings/SettingsMacrosTabExpert.vue
+++ b/src/components/settings/SettingsMacrosTabExpert.vue
@@ -141,8 +141,11 @@
                         ghost-class="ghost"
                         group="macros"
                         @change="updateMacroOrder">
-                        <v-row v-for="(macro, index) in editGroupMacros" :key="macro.name" class="my-2 mx-0">
-                            :style="draggableBgStyle"
+                        <v-row
+                            v-for="(macro, index) in editGroupMacros"
+                            :key="macro.name"
+                            class="my-2 mx-0"
+                            :style="draggableBgStyle">
                             <v-col class="col-auto pr-0 d-flex py-2">
                                 <v-icon class="handle">{{ mdiDragVertical }}</v-icon>
                             </v-col>

From 9855ca3c14f63ba81437738395bbce56f91f0868 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 22:35:11 +0100
Subject: [PATCH 10/22] refactor: add some null checks

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../settings/SettingsMacrosTabExpert.vue         | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/settings/SettingsMacrosTabExpert.vue b/src/components/settings/SettingsMacrosTabExpert.vue
index c7a5db1a6..eb4b5313d 100644
--- a/src/components/settings/SettingsMacrosTabExpert.vue
+++ b/src/components/settings/SettingsMacrosTabExpert.vue
@@ -64,7 +64,7 @@
                         attach
                         @change="updateGroupOptionColor"></v-select>
                 </settings-row>
-                <template v-if="editGroup.color === 'custom'">
+                <template v-if="editGroup?.color === 'custom'">
                     <v-divider class="my-2"></v-divider>
                     <settings-row :title="$t('Settings.MacrosTab.CustomColor')">
                         <v-menu bottom left offset-y :close-on-content-click="false">
@@ -93,9 +93,9 @@
                                 outlined
                                 v-bind="attrs"
                                 class="ml-3 minwidth-0 px-2"
-                                :color="editGroup.showInStandby ? '' : 'secondary'"
+                                :color="editGroup?.showInStandby ? '' : 'secondary'"
                                 v-on="on"
-                                @click="updateGroupOptionShowInStandby(!editGroup.showInStandby)">
+                                @click="updateGroupOptionShowInStandby(!editGroup?.showInStandby)">
                                 <v-icon small>{{ mdiSleep }}</v-icon>
                             </v-btn>
                         </template>
@@ -108,9 +108,9 @@
                                 outlined
                                 v-bind="attrs"
                                 class="ml-3 minwidth-0 px-2"
-                                :color="editGroup.showInPause ? '' : 'secondary'"
+                                :color="editGroup?.showInPause ? '' : 'secondary'"
                                 v-on="on"
-                                @click="updateGroupOptionShowInPause(!editGroup.showInPause)">
+                                @click="updateGroupOptionShowInPause(!editGroup?.showInPause)">
                                 <v-icon small>{{ mdiPause }}</v-icon>
                             </v-btn>
                         </template>
@@ -123,9 +123,9 @@
                                 outlined
                                 v-bind="attrs"
                                 class="ml-3 minwidth-0 px-2"
-                                :color="editGroup.showInPrinting ? '' : 'secondary'"
+                                :color="editGroup?.showInPrinting ? '' : 'secondary'"
                                 v-on="on"
-                                @click="updateGroupOptionShowInPrinting(!editGroup.showInPrinting)">
+                                @click="updateGroupOptionShowInPrinting(!editGroup?.showInPrinting)">
                                 <v-icon small>{{ mdiPrinter3dNozzle }}</v-icon>
                             </v-btn>
                         </template>
@@ -134,7 +134,7 @@
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <h3 class="text-h5 mt-6 mb-3">{{ $t('Settings.MacrosTab.GroupMacros') }}</h3>
-                <template v-if="editGroup.macros && editGroup.macros.length">
+                <template v-if="editGroup?.macros && editGroup?.macros?.length">
                     <draggable
                         v-model="editGroupMacros"
                         handle=".handle"

From f059f399409f2aa010d303ef910a7d5dcb16ff65 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 22:42:33 +0100
Subject: [PATCH 11/22] refactor: change type of gui.uiSettings.theme from
 string to dark/light

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/store/gui/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index ef90b8eb4..930961603 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -98,7 +98,7 @@ export interface GuiState {
     presets?: GuiPresetsState
     remoteprinters?: GuiRemoteprintersState
     uiSettings: {
-        theme: string
+        theme: 'dark' | 'light'
         logo: string
         primary: string
         displayCancelPrint: boolean

From 6df40c14e057d2259141ef47e4bf3e98d2f6a0d3 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 22:42:56 +0100
Subject: [PATCH 12/22] refactor: remove unused ThemeMixin imports

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/TheEditor.vue                  |  3 +-
 .../TheTimelapseRenderingSnackbar.vue         |  9 ++---
 src/components/TheTopbar.vue                  |  3 +-
 src/components/TheUpdateDialog.vue            | 37 +++++++++----------
 src/components/TheUploadSnackbar.vue          |  3 +-
 src/components/panels/StatusPanel.vue         |  3 +-
 6 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index 3f0402b8b..4d0974c67 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -122,7 +122,6 @@
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import ThemeMixin from '@/components/mixins/theme'
 import { capitalize, formatFilesize, windowBeforeUnloadFunction } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
 import { availableKlipperConfigReferenceTranslations } from '@/store/variables'
@@ -142,7 +141,7 @@ import type Codemirror from '@/components/inputs/Codemirror.vue'
 @Component({
     components: { Panel, CodemirrorAsync },
 })
-export default class TheEditor extends Mixins(BaseMixin, ThemeMixin) {
+export default class TheEditor extends Mixins(BaseMixin) {
     private dialogConfirmChange = false
 
     formatFilesize = formatFilesize
diff --git a/src/components/TheTimelapseRenderingSnackbar.vue b/src/components/TheTimelapseRenderingSnackbar.vue
index 5a508edcc..ab097f598 100644
--- a/src/components/TheTimelapseRenderingSnackbar.vue
+++ b/src/components/TheTimelapseRenderingSnackbar.vue
@@ -1,11 +1,9 @@
-<style scoped></style>
-
 <template>
     <div>
         <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-progress-linear v-if="progress > 0" class="mt-2" :value="progress" indeterminate />
+            <v-progress-linear v-if="progress === 0" class="mt-2" indeterminate />
         </v-snackbar>
         <v-snackbar v-model="boolShowDialogSuccess" :timeout="5000" :value="true" fixed right bottom>
             <div>
@@ -21,12 +19,11 @@
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import ThemeMixin from '@/components/mixins/theme'
 
 @Component({
     components: {},
 })
-export default class TheTimelapseRenderingSnackbar extends Mixins(BaseMixin, ThemeMixin) {
+export default class TheTimelapseRenderingSnackbar extends Mixins(BaseMixin) {
     get boolShowDialogRunning() {
         return this.status === 'running'
     }
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index 282582e95..ee9225313 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -108,7 +108,6 @@
 <script lang="ts">
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import ThemeMixin from '@/components/mixins/theme'
 import { validGcodeExtensions } from '@/store/variables'
 import Component from 'vue-class-component'
 import axios from 'axios'
@@ -145,7 +144,7 @@ type uploadSnackbar = {
         TheNotificationMenu,
     },
 })
-export default class TheTopbar extends Mixins(BaseMixin, ThemeMixin) {
+export default class TheTopbar extends Mixins(BaseMixin) {
     mdiAlertOctagonOutline = mdiAlertOctagonOutline
     mdiContentSave = mdiContentSave
     mdiFileUpload = mdiFileUpload
diff --git a/src/components/TheUpdateDialog.vue b/src/components/TheUpdateDialog.vue
index cc2926acb..77f318a92 100644
--- a/src/components/TheUpdateDialog.vue
+++ b/src/components/TheUpdateDialog.vue
@@ -1,20 +1,3 @@
-<style scoped>
-.updaterLogScroll {
-    height: 350px;
-    max-height: 350px;
-    overflow-x: hidden;
-}
-
-.updaterLog .title-cell {
-    white-space: nowrap;
-    vertical-align: top;
-}
-
-.updaterLog.v-data-table > .v-data-table__wrapper > table > tbody > tr > td {
-    height: auto;
-}
-</style>
-
 <template>
     <v-dialog :value="application !== ''" persistent max-width="800" class="mx-0">
         <v-card :loading="!complete">
@@ -91,13 +74,12 @@
 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 { mdiUpdate } from '@mdi/js'
 
 @Component({
     components: {},
 })
-export default class TheUpdateDialog extends Mixins(BaseMixin, ThemeMixin) {
+export default class TheUpdateDialog extends Mixins(BaseMixin) {
     mdiUpdate = mdiUpdate
 
     declare $refs: {
@@ -186,3 +168,20 @@ export default class TheUpdateDialog extends Mixins(BaseMixin, ThemeMixin) {
     }
 }
 </script>
+
+<style scoped>
+.updaterLogScroll {
+    height: 350px;
+    max-height: 350px;
+    overflow-x: hidden;
+}
+
+.updaterLog .title-cell {
+    white-space: nowrap;
+    vertical-align: top;
+}
+
+.updaterLog.v-data-table > .v-data-table__wrapper > table > tbody > tr > td {
+    height: auto;
+}
+</style>
diff --git a/src/components/TheUploadSnackbar.vue b/src/components/TheUploadSnackbar.vue
index 07a96a25c..5c4974e7e 100644
--- a/src/components/TheUploadSnackbar.vue
+++ b/src/components/TheUploadSnackbar.vue
@@ -18,14 +18,13 @@
 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 { mdiClose } from '@mdi/js'
 import { formatFilesize } from '@/plugins/helpers'
 
 @Component({
     components: {},
 })
-export default class TheUploadSnackbar extends Mixins(BaseMixin, ThemeMixin) {
+export default class TheUploadSnackbar extends Mixins(BaseMixin) {
     mdiClose = mdiClose
     formatFilesize = formatFilesize
 
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 7d8877fce..793bd8b53 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -113,7 +113,6 @@
 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 MinSettingsPanel from '@/components/panels/MinSettingsPanel.vue'
 import KlippyStatePanel from '@/components/panels/KlippyStatePanel.vue'
 import StatusPanelPrintstatus from '@/components/panels/Status/Printstatus.vue'
@@ -152,7 +151,7 @@ import { PrinterStateMacro } from '@/store/printer/types'
         StatusPanelPauseAtLayerDialog,
     },
 })
-export default class StatusPanel extends Mixins(BaseMixin, ThemeMixin) {
+export default class StatusPanel extends Mixins(BaseMixin) {
     mdiInformation = mdiInformation
     mdiMessageProcessingOutline = mdiMessageProcessingOutline
     mdiCloseCircle = mdiCloseCircle

From 1e4e9a3ee7541c7b5ceb35ab272e7d06f8fced26 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:04:31 +0100
Subject: [PATCH 13/22] fix: printer farm background image

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/TheSidebar.vue              |  6 ++---
 src/components/mixins/theme.ts             |  4 ++++
 src/components/panels/FarmPrinterPanel.vue | 27 ++++++++++++----------
 src/store/farm/printer/getters.ts          |  4 ++--
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 533281d93..17a655459 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -56,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 ThemeMixin from '@/components/mixins/theme'
 
 @Component({
     components: {
@@ -65,7 +66,7 @@ import NavigationMixin from '@/components/mixins/navigation'
         MainsailLogo,
     },
 })
-export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
+export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin, ThemeMixin) {
     navigationWidth = navigationWidth
     topbarHeight = topbarHeight
 
@@ -82,8 +83,7 @@ export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
     }
 
     get sidebarBackground(): string {
-        const defaultBg = this.$vuetify.theme.dark ? '/img/sidebar-background.svg' : '/img/sidebar-background-light.svg'
-        return this.$store.getters['files/getCustomSidebarBackground'] ?? defaultBg
+        return this.$store.getters['files/getCustomSidebarBackground'] ?? this.sidebarBgImage
     }
 
     get currentPage(): string {
diff --git a/src/components/mixins/theme.ts b/src/components/mixins/theme.ts
index 4b9b649a9..fee4bfb5b 100644
--- a/src/components/mixins/theme.ts
+++ b/src/components/mixins/theme.ts
@@ -40,4 +40,8 @@ export default class ThemeMixin extends Vue {
     get progressBarColor() {
         return this.$vuetify.theme.dark ? 'white' : 'primary'
     }
+
+    get sidebarBgImage() {
+        return this.$vuetify.theme.dark ? '/img/sidebar-background.svg' : '/img/sidebar-background-light.svg'
+    }
 }
diff --git a/src/components/panels/FarmPrinterPanel.vue b/src/components/panels/FarmPrinterPanel.vue
index 00125b2c4..bcfb55959 100644
--- a/src/components/panels/FarmPrinterPanel.vue
+++ b/src/components/panels/FarmPrinterPanel.vue
@@ -57,15 +57,17 @@
                             style="background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px)">
                             <v-row>
                                 <v-col class="col-auto pr-0 d-flex align-center" style="width: 58px">
-                                    <template v-if="printer_logo">
-                                        <img :src="printer_logo" style="width: 100%" class="my-auto" alt="Logo" />
-                                    </template>
-                                    <template v-else>
-                                        <mainsail-logo
-                                            :color="printerLogoColor"
-                                            style="width: 100%"
-                                            class="my-auto"></mainsail-logo>
-                                    </template>
+                                    <img
+                                        v-if="printer_logo"
+                                        :src="printer_logo"
+                                        style="width: 100%"
+                                        class="my-auto"
+                                        alt="Logo" />
+                                    <mainsail-logo
+                                        v-else
+                                        :color="printerLogoColor"
+                                        style="width: 100%"
+                                        class="my-auto" />
                                 </v-col>
                                 <v-col class="col" style="width: 100px">
                                     <h3 class="font-weight-regular">{{ printer_status }}</h3>
@@ -121,6 +123,7 @@ import { Debounce } from 'vue-debounce-decorator'
 import WebcamMixin from '@/components/mixins/webcam'
 import WebcamWrapper from '@/components/webcams/WebcamWrapper.vue'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import ThemeMixin from '@/components/mixins/theme'
 
 @Component({
     components: {
@@ -129,7 +132,7 @@ import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
         'mainsail-logo': MainsailLogo,
     },
 })
-export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
+export default class FarmPrinterPanel extends Mixins(BaseMixin, ThemeMixin, WebcamMixin) {
     mdiPrinter3d = mdiPrinter3d
     mdiWebcam = mdiWebcam
     mdiMenuDown = mdiMenuDown
@@ -176,9 +179,9 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get printer_image() {
-        if (this.currentWebcam) return '/img/sidebar-background.svg'
+        if (this.currentWebcam) return this.sidebarBgImage
 
-        return this.$store.getters['farm/' + this.printer._namespace + '/getImage']
+        return this.$store.getters['farm/' + this.printer._namespace + '/getImage'] ?? this.sidebarBgImage
     }
 
     get printer_logo() {
diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts
index 2b135b1a6..2c425fc85 100644
--- a/src/store/farm/printer/getters.ts
+++ b/src/store/farm/printer/getters.ts
@@ -125,7 +125,7 @@ export const getters: GetterTree<FarmPrinterState, any> = {
     getImage: (state) => {
         if (state.current_file.filename && state.current_file.thumbnails?.length) {
             const indexLastDir = state.current_file.filename.lastIndexOf('/')
-            const dir = indexLastDir !== -1 ? state.current_file.filename.substr(0, indexLastDir) + '/' : ''
+            const dir = indexLastDir !== -1 ? state.current_file.filename.substring(0, indexLastDir) + '/' : ''
             const thumbnail = state.current_file.thumbnails.find((thumb) => thumb.width >= thumbnailBigMin)
 
             if (thumbnail && 'relative_path' in thumbnail)
@@ -140,7 +140,7 @@ export const getters: GetterTree<FarmPrinterState, any> = {
                 )
         }
 
-        return '/img/sidebar-background.svg'
+        return null
     },
 
     getThemeFileUrl: (state) => (acceptName: string, acceptExtensions: string[]) => {

From 6974817b298d013bfb1f95ab84122a8a5b894d36 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:10:40 +0100
Subject: [PATCH 14/22] fix: fix border color in BarsControl

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/ToolheadControls/BarsControl.vue   | 106 ++++++++++--------
 1 file changed, 57 insertions(+), 49 deletions(-)

diff --git a/src/components/panels/ToolheadControls/BarsControl.vue b/src/components/panels/ToolheadControls/BarsControl.vue
index 2be405a4f..b5d5b08e3 100644
--- a/src/components/panels/ToolheadControls/BarsControl.vue
+++ b/src/components/panels/ToolheadControls/BarsControl.vue
@@ -1,52 +1,3 @@
-<style scoped>
-.btnHomeAxis {
-    width: 36px;
-    min-width: 36px !important;
-}
-
-.btnGroup {
-    height: 28px !important;
-}
-
-.btnMinWidthAuto {
-    min-width: auto !important;
-}
-
-._btn-group {
-    border-radius: 4px;
-    display: inline-flex;
-    flex-wrap: nowrap;
-    max-width: 100%;
-    min-width: 100%;
-    width: 100%;
-
-    .v-btn {
-        border-radius: 0;
-        border-color: rgba(255, 255, 255, 0.12);
-        border-style: solid;
-        border-width: thin;
-        box-shadow: none;
-        height: 28px;
-        opacity: 0.8;
-        min-width: auto !important;
-    }
-
-    .v-btn:first-child {
-        border-top-left-radius: inherit;
-        border-bottom-left-radius: inherit;
-    }
-
-    .v-btn:last-child {
-        border-top-right-radius: inherit;
-        border-bottom-right-radius: inherit;
-    }
-
-    .v-btn:not(:first-child) {
-        border-left-width: 0;
-    }
-}
-</style>
-
 <template>
     <div>
         <!-- HOME ALL / ACTION BUTTON -->
@@ -238,3 +189,60 @@ export default class BarsControl extends Mixins(BaseMixin, ControlMixin) {
     }
 }
 </script>
+
+<style scoped>
+.btnHomeAxis {
+    width: 36px;
+    min-width: 36px !important;
+}
+
+.btnGroup {
+    height: 28px !important;
+}
+
+.btnMinWidthAuto {
+    min-width: auto !important;
+}
+
+._btn-group {
+    border-radius: 4px;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .v-btn {
+        border-radius: 0;
+        border-color: rgba(255, 255, 255, 0.12);
+        border-style: solid;
+        border-width: thin;
+        box-shadow: none;
+        height: 28px;
+        opacity: 0.8;
+        min-width: auto !important;
+    }
+
+    .v-btn:first-child {
+        border-top-left-radius: inherit;
+        border-bottom-left-radius: inherit;
+    }
+
+    .v-btn:last-child {
+        border-top-right-radius: inherit;
+        border-bottom-right-radius: inherit;
+    }
+
+    .v-btn:not(:first-child) {
+        border-left-width: 0;
+    }
+}
+
+html.theme--light {
+    ._btn-group {
+        .v-btn {
+            border-color: rgba(0, 0, 0, 0.12);
+        }
+    }
+}
+</style>

From 7716aa129de9c63b25e48259ac752c24caa6fab4 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:10:53 +0100
Subject: [PATCH 15/22] fix: fix border-top in default console

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/assets/styles/page.css                   | 4 ----
 src/components/console/ConsoleTableEntry.vue | 4 ++++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/page.css b/src/assets/styles/page.css
index fe61b1ee7..fc3438e48 100644
--- a/src/assets/styles/page.css
+++ b/src/assets/styles/page.css
@@ -103,7 +103,3 @@ html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-sc
 html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
     background: rgba(0, 0, 0, 0.55) !important;
 }
-
-html.theme--light .consoleTableRow.default + .consoleTableRow .col {
-    border-top-color: rgba(0, 0, 0, 0.12) !important;
-}
diff --git a/src/components/console/ConsoleTableEntry.vue b/src/components/console/ConsoleTableEntry.vue
index b8930895d..871ac909d 100644
--- a/src/components/console/ConsoleTableEntry.vue
+++ b/src/components/console/ConsoleTableEntry.vue
@@ -72,4 +72,8 @@ export default class ConsoleTableEntry extends Mixins(BaseMixin) {
         }
     }
 }
+
+html.theme--light .consoleTableRow.default + .consoleTableRow .col {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
 </style>

From f5dc9486853fbd7234131a8a83680c9118b815b0 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:11:50 +0100
Subject: [PATCH 16/22] fix: fix border in TheSettingsMenu

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/TheSettingsMenu.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
index 865c890a4..f989aae96 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/src/components/TheSettingsMenu.vue
@@ -260,6 +260,10 @@ export default class TheSettingsMenu extends Mixins(BaseMixin) {
     height: 100%;
 }
 
+html.theme--light .settings-tabs-bar {
+    border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+
 .settings-tabs.height500 {
     height: 500px;
     max-height: calc(var(--app-height) - 111px);

From ed2b02184005763510413b49e74d9c0c5a018cf3 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:14:52 +0100
Subject: [PATCH 17/22] fix: fix border in ExtruderControlPanel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/Extruder/ExtruderControlPanelControl.vue           | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/panels/Extruder/ExtruderControlPanelControl.vue b/src/components/panels/Extruder/ExtruderControlPanelControl.vue
index 1c142e972..fdb7a10a8 100644
--- a/src/components/panels/Extruder/ExtruderControlPanelControl.vue
+++ b/src/components/panels/Extruder/ExtruderControlPanelControl.vue
@@ -311,6 +311,10 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ExtruderMixi
     }
 }
 
+html.theme--light ._btn-group .v-btn {
+    border-color: rgba(0, 0, 0, 0.12) !important;
+}
+
 ._btn-qs {
     font-size: 0.8rem !important;
     max-height: 24px;

From 2bfbb5fd008eb8a5847383717c957f3a06a1ce9b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:15:51 +0100
Subject: [PATCH 18/22] fix: fix border in ExtruderControlPanelTools

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/Extruder/ExtruderControlPanelTools.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/panels/Extruder/ExtruderControlPanelTools.vue b/src/components/panels/Extruder/ExtruderControlPanelTools.vue
index 5248d26f8..5cce8979d 100644
--- a/src/components/panels/Extruder/ExtruderControlPanelTools.vue
+++ b/src/components/panels/Extruder/ExtruderControlPanelTools.vue
@@ -66,4 +66,8 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin
         border-left-width: 0;
     }
 }
+
+html.theme--light ._btn-group .v-btn {
+    border-color: rgba(0, 0, 0, 0.12);
+}
 </style>

From 46417ae3e68db4bec35917de5c20584179d1eef8 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:17:00 +0100
Subject: [PATCH 19/22] fix: fix border in MiniconsolePanel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/MiniconsolePanel.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/panels/MiniconsolePanel.vue b/src/components/panels/MiniconsolePanel.vue
index 93daad7a3..1d5b83925 100644
--- a/src/components/panels/MiniconsolePanel.vue
+++ b/src/components/panels/MiniconsolePanel.vue
@@ -341,6 +341,10 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
     border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
+html.theme--light .consoleTable {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+
 .gcode-command-field {
     font-family: 'Roboto Mono', monospace;
 }

From 7b2790b5459a0743daad34db8b853c5985dd4401 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:18:02 +0100
Subject: [PATCH 20/22] fix: fix border in ZoffsetControl

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/ToolheadControls/ZoffsetControl.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/panels/ToolheadControls/ZoffsetControl.vue b/src/components/panels/ToolheadControls/ZoffsetControl.vue
index ad8794731..207c447ce 100644
--- a/src/components/panels/ToolheadControls/ZoffsetControl.vue
+++ b/src/components/panels/ToolheadControls/ZoffsetControl.vue
@@ -237,6 +237,10 @@ export default class ZoffsetControl extends Mixins(BaseMixin, ZoffsetMixin) {
     }
 }
 
+html.theme--light ._btn-group .v-btn {
+    border-color: rgba(0, 0, 0, 0.12);
+}
+
 ._btn-qs {
     font-size: 0.8rem !important;
     font-weight: 400;

From c60104ff6d477d71b7e56ae8c3ef6b059c77f4a5 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:20:50 +0100
Subject: [PATCH 21/22] refactor: refactor theme--light css block

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/ToolheadControls/BarsControl.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/ToolheadControls/BarsControl.vue b/src/components/panels/ToolheadControls/BarsControl.vue
index b5d5b08e3..beb222420 100644
--- a/src/components/panels/ToolheadControls/BarsControl.vue
+++ b/src/components/panels/ToolheadControls/BarsControl.vue
@@ -238,11 +238,7 @@ export default class BarsControl extends Mixins(BaseMixin, ControlMixin) {
     }
 }
 
-html.theme--light {
-    ._btn-group {
-        .v-btn {
-            border-color: rgba(0, 0, 0, 0.12);
-        }
-    }
+html.theme--light ._btn-group .v-btn {
+    border-color: rgba(0, 0, 0, 0.12);
 }
 </style>

From 001de444e4bdd932d45b056596736dca39168366 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 16 Dec 2023 09:32:20 +0100
Subject: [PATCH 22/22] fix: add light mode to circle control

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/ToolheadControls/CircleControl.vue | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/panels/ToolheadControls/CircleControl.vue b/src/components/panels/ToolheadControls/CircleControl.vue
index abf89d2a7..265e8155f 100644
--- a/src/components/panels/ToolheadControls/CircleControl.vue
+++ b/src/components/panels/ToolheadControls/CircleControl.vue
@@ -745,6 +745,22 @@ svg a.step.outer {
     fill: #333;
 }
 
+html.theme--light svg a.step.inner {
+    fill: #ccc;
+}
+
+html.theme--light svg a.step.inner-mid {
+    fill: #ddd;
+}
+
+html.theme--light svg a.step.outer-mid {
+    fill: #eee;
+}
+
+html.theme--light svg a.step.outer {
+    fill: #fff;
+}
+
 svg .disabled a.step {
     pointer-events: none;
 }
@@ -758,6 +774,11 @@ svg g#stepsXY {
     fill: white;
 }
 
+html.theme--light svg g#stepsZ,
+html.theme--light svg g#stepsXY {
+    fill: black;
+}
+
 svg a#tilt_adjust text {
     font-family: 'Roboto-Regular', 'Roboto', sans-serif;
     font-size: 3px;
@@ -790,6 +811,11 @@ svg g#stepsZ.disabled text {
     fill: rgba(255, 255, 255, 0.3);
 }
 
+html.theme--light svg g#stepsXY.disabled text,
+html.theme--light svg g#stepsZ.disabled text {
+    fill: rgba(0, 0, 0, 0.5);
+}
+
 svg a#tilt_adjust,
 svg a#stepper_off {
     transition: opacity 250ms;