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] 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'