Merge branch 'mainsail-crew:develop' into develop

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mainsail",
-    "version": "2.8.0",
+    "version": "2.9.0",
     "private": true,
     "decription": "a klipper web interface",
     "author": {

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 dark :style="cssVars">
+    <v-app :style="cssVars">
         <template v-if="socketIsConnected && guiIsReady">
             <the-sidebar />
             <the-topbar />
@@ -28,6 +28,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'
@@ -63,7 +64,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']
 
@@ -101,8 +102,10 @@ export default class App extends Mixins(BaseMixin) {
         }
 
         // overwrite padding left for the sidebar
-        if (this.naviDrawer && this.navigationStyle === 'iconsAndText') style.paddingLeft = '220px'
-        if (this.naviDrawer && this.navigationStyle === 'iconsOnly') style.paddingLeft = '56px'
+        if (this.naviDrawer && !this.$vuetify.breakpoint.mdAndDown) {
+            if (this.navigationStyle === 'iconsAndText') style.paddingLeft = '220px'
+            if (this.navigationStyle === 'iconsOnly') style.paddingLeft = '56px'
+        }
 
         return style
     }
@@ -123,6 +126,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
     }
@@ -199,6 +206,15 @@ export default class App extends Mixins(BaseMixin) {
         })
     }
 
+    @Watch('theme')
+    themeChanged(newVal: string): void {
+        const dark = newVal !== 'light'
+        this.$vuetify.theme.dark = dark
+
+        const doc = document.documentElement
+        doc.className = dark ? 'theme--dark' : 'theme--light'
+    }
+
     drawFavicon(val: number): void {
         const favicon16: HTMLLinkElement | null = document.querySelector("link[rel*='icon'][sizes='16x16']")
         const favicon32: HTMLLinkElement | null = document.querySelector("link[rel*='icon'][sizes='32x32']")

src/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;
+}

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 :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 dark>
+        <v-snackbar v-model="loaderBool" :timeout="-1" :value="true" fixed right bottom>
             <div>
                 {{ snackbarHeadline }}
                 <br />

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);