Load default theme from config.json, conditional dark attributes, lig…

…ht theme adjustments, further theme mixin coverage of extant default dark styling, charts reactive to theme switch

public/config.json

@@ -1,5 +1,6 @@
 {
     "defaultLocale": "en",
+    "defaultTheme": "dark",
     "hostname": null,
     "port": null,
     "instancesDB": "moonraker",

remote/config.json

@@ -1,5 +1,6 @@
 {
     "defaultLocale": "en",
+    "defaultTheme": "dark",
     "hostname": null,
     "port": null,
     "instancesDB": "browser",

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

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

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

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 {