feat: moves theme switcher to settings page and json config

Author: cadriel

src/App.vue

@@ -68,8 +68,7 @@ export default class App extends Mixins(UtilsMixin) {
   }
 
   mounted () {
-    this.$vuetify.theme.dark = this.$store.state.config.localConfig.darkMode
-
+    this.$vuetify.theme.dark = this.$store.state.config.fileConfig.general.darkMode
     EventBus.$on('flashMessage', (payload: FlashMessageType) => {
       this.flashMessage.text = (payload && payload.text) || undefined
       this.flashMessage.type = (payload && payload.type) || undefined

src/components/widgets/SystemCommandsWidget.vue

@@ -10,22 +10,6 @@
     </template>
 
     <v-card color="secondary">
-      <v-list dense color="secondary">
-        <v-list-item>
-          <v-list-item-action>
-            <v-switch
-              @click.native.stop
-              v-model="darkmode"
-              hide-details
-              class="mr-5 d-none d-sm-block"
-            ></v-switch>
-          </v-list-item-action>
-          <v-list-item-title>Enable Dark Mode</v-list-item-title>
-        </v-list-item>
-      </v-list>
-
-      <v-divider></v-divider>
-
       <v-list dense color="secondary">
         <v-list-item>
           <v-btn block color="warning" :disabled="printerBusy" @click="restartKlippy" class="me-2 mb-2">Restart</v-btn>
@@ -84,15 +68,6 @@ export default class SystemCommandsWidget extends Mixins(UtilsMixin) {
     open: false
   }
 
-  get darkmode () {
-    return this.$store.state.config.localConfig.darkMode
-  }
-
-  set darkmode (val: boolean) {
-    this.$vuetify.theme.dark = val
-    this.$store.dispatch('config/saveLocalStorage', { darkMode: val })
-  }
-
   hostReboot (val: boolean) {
     if (val) {
       SocketActions.machineReboot()

src/components/widgets/settings/ThemeSettingsWidget.vue

@@ -0,0 +1,45 @@
+
+<template>
+  <v-card color="tertiary" class="mb-4">
+    <v-card-title class="quaternary font-weight-light"><v-icon left>{{ icons.cogs }}</v-icon> Themes</v-card-title>
+    <v-divider></v-divider>
+    <v-card-text>
+      <v-select
+        label="Theme"
+        v-model="theme"
+        :items="['dark', 'light']">
+      </v-select>
+      <!-- <v-switch
+        @click.native.stop
+        v-model="darkmode"
+        hide-details
+        class="mr-5 d-none d-sm-block"
+      ></v-switch> -->
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import UtilsMixin from '@/mixins/utils'
+
+@Component({
+  components: {}
+})
+export default class ThemeSettingsWidget extends Mixins(UtilsMixin) {
+  // Theme is currently restricted to dark / light.
+  // This starts impl thought on more options.
+  get theme () {
+    const darkMode = this.$store.state.config.fileConfig.general.darkMode
+    return (darkMode)
+      ? 'dark'
+      : 'light'
+  }
+
+  set theme (val: string) {
+    const darkMode = (val === 'dark')
+    this.$vuetify.theme.dark = darkMode
+    this.$store.dispatch('config/saveGeneric', { key: 'fileConfig.general.darkMode', value: darkMode })
+  }
+}
+</script>

src/main.ts

@@ -67,6 +67,11 @@ promise
       .then((fileConfig) => {
         // Init the store. This should include any GUI settings we've loaded from moonraker.
         return store.dispatch('init', fileConfig).then(() => {
+          // Set vuetify to the correct initial theme.
+          if (store.state.config && store.state.config.fileConfig.general) {
+            vuetify.framework.theme.dark = store.state.config.fileConfig.general.darkMode
+          }
+
           // Init the socket plugin
           Vue.use(SocketPlugin, {
             url: apiConfig.socketUrl,

src/plugins/vuetify.ts

@@ -9,7 +9,6 @@ export default new Vuetify({
     iconfont: 'mdiSvg'
   },
   theme: {
-    dark: true, // default.
     themes: {
       dark: {
         primary: colors.blue.base,

src/store/config/actions.ts

@@ -26,7 +26,7 @@ export const actions: ActionTree<ConfigState, RootState> = {
 
   /**
    * Saves keys to file storage. Assumes a root[key] structure
-   * under state.config.fileConfig
+   * under state.config
    */
   async saveGeneric ({ commit }, config: GenericSave) {
     commit('setUnsavedChanges', true)
@@ -62,10 +62,9 @@ export const actions: ActionTree<ConfigState, RootState> = {
       const formData = new FormData()
       const filename = Globals.SETTINGS_FILENAME
       const file = new File([JSON.stringify(state.fileConfig)], filename)
-      // let file = new File([JSON.stringify({ webcam: state.webcam, gui: state.gui })], 'gui.json');
       formData.append('file', file, filename)
       formData.append('root', 'config')
-      console.debug('uploading configuration...', filename, formData)
+      console.debug('uploading configuration...', filename, state.fileConfig)
       Vue.$http.post(
         rootState.config?.apiUrl + '/server/files/upload',
         formData,

src/store/config/index.ts

@@ -15,12 +15,12 @@ export const state: ConfigState = {
   localConfig: {
     cameraVisible: false,
     chartVisible: true,
-    limitsVisible: false,
-    darkMode: true
+    limitsVisible: false
   },
   fileConfig: {
     general: {
       instanceName: Globals.APP_NAME,
+      darkMode: true,
       printTimeEstimationsType: 'file',
       defaultExtrudeLength: 10,
       defaultExtrudeSpeed: 5,

src/store/config/types.ts

@@ -13,7 +13,6 @@ export interface LocalConfig {
   cameraVisible: boolean;
   chartVisible: boolean;
   limitsVisible: boolean;
-  darkMode: boolean;
 }
 
 export interface SaveLocalConfig {
@@ -28,6 +27,7 @@ export interface FileConfig {
 
 export interface GeneralConfig {
   instanceName: string;
+  darkMode: boolean;
   defaultExtrudeLength: number;
   defaultExtrudeSpeed: number;
   defaultToolheadMoveLength: string;

src/views/Settings.vue

@@ -13,6 +13,7 @@
           <v-col cols="12" sm="4" md="3">
             <klippy-disconnected-widget v-if="!klippyConnected"></klippy-disconnected-widget>
             <general-settings-widget></general-settings-widget>
+            <theme-settings-widget></theme-settings-widget>
             <print-time-estimate-settings-widget></print-time-estimate-settings-widget>
           </v-col>
           <v-col cols="12" sm="4" md="3">
@@ -39,6 +40,7 @@ import KlippyDisconnectedWidget from '@/components/widgets/configuration/KlippyD
 import CameraSettingsWidget from '@/components/widgets/settings/CameraSettingsWidget.vue'
 import ToolheadSettingsWidget from '@/components/widgets/settings/ToolheadSettingsWidget.vue'
 import PrintTimeEstimateSettingsWidget from '@/components/widgets/settings/PrintTimeEstimateSettingsWidget.vue'
+import ThemeSettingsWidget from '@/components/widgets/settings/ThemeSettingsWidget.vue'
 import { MetaInfo } from 'vue-meta'
 import EventBus from '@/eventBus'
 
@@ -50,7 +52,8 @@ import EventBus from '@/eventBus'
     KlippyDisconnectedWidget,
     CameraSettingsWidget,
     ToolheadSettingsWidget,
-    PrintTimeEstimateSettingsWidget
+    PrintTimeEstimateSettingsWidget,
+    ThemeSettingsWidget
   },
   metaInfo (this: Settings): MetaInfo {
     return {