Add dark mode, implements #75

Author: MiniDigger

quasar.conf.js

@@ -22,7 +22,11 @@ module.exports = function(ctx) {
       directives: [],
 
       // Quasar plugins
-      plugins: ["Notify", "Dialog"]
+      plugins: ["Notify", "Dialog"],
+
+      config: {
+        dark: 'auto'
+      }
     },
 
     supportIE: false,

src/components/display/Member.vue

@@ -2,7 +2,7 @@
   <div>
     <div v-if="toObf === true && mojangData" style="overflow: auto">
       <q-item-section>
-        <q-item-label class="text-subtitle1" style="background-color: #d3d3d370">
+        <q-item-label class="text-subtitle1 line-bg-color">
           <div class="row">
             <div class="col-1">Class:</div>
             <div class="col-11 row">
@@ -47,7 +47,7 @@
 
     <div v-else-if="toObf === false && mojangData" style="overflow: auto">
       <q-item-section>
-        <q-item-label class="text-subtitle1" style="background-color: #d3d3d370">
+        <q-item-label class="text-subtitle1 line-bg-color">
           <div class="row">
             <div class="col-1">Class:</div>
             <div class="col-11 row">
@@ -214,4 +214,18 @@
   .col-11.offset-1.row:nth-child(even) {
     background-color: #d3d3d370;
   }
+
+  .line-bg-color {
+    background-color: #d3d3d370
+  }
+
+  .body--dark {
+    .col-11.offset-1.row:nth-child(even) {
+      background-color: #44434370;
+    }
+
+    .line-bg-color {
+      background-color: #44434370
+    }
+  }
 </style>

src/components/display/Method.vue

@@ -32,10 +32,10 @@
         </span>
       </div>
       <div class="col-3" v-else style="color: gray">
-        {{ mojangData.obf }}<span style="color: black">({{ mojangData.params }})</span>
+        {{ mojangData.obf }}<span class="arg-color">({{ mojangData.params }})</span>
       </div>
       <div class="col-3" style="color: red">
-       {{ mojangData.mapped }}<span style="color: black">({{ mojangData.params }})</span>
+       {{ mojangData.mapped }}<span class="arg-color">({{ mojangData.params }})</span>
       </div>
     </template>
   </div>
@@ -61,8 +61,18 @@
   };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .col-3 {
     overflow-wrap: break-word;
   }
+
+  .arg-color {
+    color: black;
+  }
+
+  .body--dark {
+    .arg-color {
+      color: #cacaca;
+    }
+  }
 </style>

src/layouts/MainLayout.vue

@@ -23,7 +23,6 @@
       :width="200"
       :breakpoint="500"
       bordered
-      content-class="bg-grey-3"
     >
       <q-scroll-area class="fit">
         <q-list padding>
@@ -45,6 +44,19 @@
               Spigot -> Mojang
             </q-item-section>
           </q-item>
+          <q-item clickable v-ripple aria-label="Toggle Dark Mode" @click="toggleDark">
+            <q-item-section avatar>
+              <q-icon name="brightness_5" v-if="darkMode"/>
+              <q-icon name="brightness_2" v-else />
+            </q-item-section>
+
+            <q-item-section v-if="darkMode">
+              Light Mode
+            </q-item-section>
+            <q-item-section v-else>
+              Dark Mode
+            </q-item-section>
+          </q-item>
         </q-list>
       </q-scroll-area>
     </q-drawer>
@@ -67,9 +79,17 @@
       miniState: true
     };
   },
+  computed: {
+    darkMode() {
+      return this.$q.dark.isActive;
+    }
+  },
   methods: {
     openUrl(url) {
       openURL(url);
+    },
+    toggleDark() {
+      this.$q.dark.toggle();
     }
   }
 };

src/store/store-flag.d.ts

@@ -0,0 +1,9 @@
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}