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'