ayanova/src/views/home-user-settings.vue

@@ -84,13 +84,7 @@
               @input="fieldValueChanged('timeZoneOverride')"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" lg="4" xl="3">
-            <v-checkbox
-              v-model="darkMode"
-              :label="$ay.t('DarkMode')"
-              @change="darkModeChanged()"
-            ></v-checkbox>
-          </v-col>
+
           <v-col cols="12" sm="6" lg="4" xl="3">
             <!-- https://vuetifyjs.com/en/components/color-pickers -->
             <span class="v-label v-label--active theme--light">
@@ -235,8 +229,15 @@ export default {
       return window.$gz.form;
     },
     darkModeChanged() {
-      this.$store.commit("setDarkMode", this.darkMode);
-      this.$vuetify.theme.dark = this.darkMode;
+      let vm = this;
+      vm.darkMode = !vm.darkMode;
+      vm.$store.commit("setDarkMode", vm.darkMode);
+      vm.$vuetify.theme.dark = vm.darkMode;
+      window.$gz.eventBus.$emit(
+        "menu-change-item-icon",
+        FORM_KEY + ":darkmode",
+        vm.darkMode ? "fa-sun" : "fa-moon"
+      );
     },
     fieldValueChanged(ref) {
       if (!this.formState.loading && !this.formState.readOnly) {
@@ -365,6 +366,9 @@ function clickHandler(menuItem) {
       case "save":
         m.vm.submit();
         break;
+      case "darkmode":
+        m.vm.darkModeChanged();
+        break;
 
       default:
         window.$gz.eventBus.$emit(
@@ -400,6 +404,14 @@ function generateMenu(vm) {
     });
   }
 
+  menuOptions.menuItems.push({
+    title: "DarkMode",
+    icon: vm.darkMode ? "fa-sun" : "fa-moon",
+    surface: true,
+    key: FORM_KEY + ":darkmode",
+    vm: vm
+  });
+
   //change password and login
   menuOptions.menuItems.push({
     title: "SetLoginPassword",