dark mode icon

client/package.json

@@ -28,21 +28,12 @@
     "chartjs-plugin-datalabels": "^0.7.0",
     "date-fns": "^2.2.1",
     "date-fns-tz": "^1.0.7",
-<<<<<<< HEAD
     "quasar": "^1.3.0",
     "vue-chartjs": "^3.4.2"
   },
   "devDependencies": {
     "@quasar/app": "^1.2.3",
     "@quasar/quasar-app-extension-icon-genie": "^1.1.2",
-=======
-    "quasar": "^1.2.4",
-    "vue-chartjs": "^3.4.2"
-  },
-  "devDependencies": {
-    "@quasar/app": "^1.2.2",
-    "@quasar/quasar-app-extension-icon-genie": "^1.1.1",
->>>>>>> 81e79fc3f7ae358c7237c8c95dc1ad9960415faf
     "@quasar/quasar-app-extension-qenv": "^1.0.0-beta.2",
     "@quasar/quasar-app-extension-qmarkdown": "^1.0.0-beta.21",
     "@quasar/quasar-app-extension-testing-quality": "^1.0.0-beta.8",

client/src/layouts/MyLayout.vue

@@ -23,7 +23,12 @@
           <q-breadcrumbs-el label="Timesheet" icon="home" to="/" class="text-secondary" />
           <q-breadcrumbs-el v-show="subPage" :label="page" :icon="pageIcon" :to="page" />
         </q-breadcrumbs>
-        <q-checkbox left-label label="dark mode" v-model="dark" />
+        <q-icon :name="darkIcon" size="sm" @click="dark = !dark">
+          <q-tooltip>
+            Toggle dark / light mode
+          </q-tooltip>
+        </q-icon>
+
         <q-btn flat to="/help">
           Help
         </q-btn>
@@ -83,8 +88,16 @@ export default {
         return this.$q.dark.isActive
       },
       set (val) {
+        this.darkIcon = 'brightness_high'
         this.$q.dark.set(val)
       }
+    },
+    darkIcon () {
+      if (this.dark === true) {
+        return 'brightness_high'
+      } else {
+        return 'brightness_low'
+      }
     }
   },
 
@@ -96,6 +109,7 @@ export default {
     this.$store.dispatch('settings/getSettings')
     this.logo = 'statics/' + process.env.APP_LOGO
   },
+
   methods: {
   }
 }