Update the Light/Dark UX (#186)

* - updated the light/dark toggle to a logical icon
- moved the light/dark to the topbar

Signed-off-by: Aaron Lippold <lippold@gmail.com>

* - moved the dark mode methods to the TopBar component
- FIXME in methods - please review

Signed-off-by: Aaron Lippold <lippold@gmail.com>

* upated icon to better communicate

Signed-off-by: Aaron Lippold <lippold@gmail.com>

* Cleanup

Signed-off-by: Jacob Henry <jchenry@mitre.org>

package.json

@@ -38,7 +38,7 @@
     "chroma-js": "^2.1.0",
     "connect": "^3.7.0",
     "core-js": "^3.4.1",
-    "d3": "^5.12.0",
+    "d3": "^5.13.1",
     "date-fns": "^2.6.0",
     "diff": "^4.0.1",
     "file-saver": "^2.0.2",
@@ -97,7 +97,7 @@
     "material-design-icons-iconfont": "^5.0.1",
     "node-sass": "^4.13.0",
     "prettier": "^1.19.1",
-    "sass": "^1.23.3",
+    "sass": "^1.23.6",
     "sass-loader": "^7.3.1",
     "typescript": "^3.7.2",
     "vue-cli-plugin-vuetify": "^0.6.3",

src/components/global/Sidebar.vue

@@ -41,12 +41,6 @@
           <LinkItem key="help" text="Help" icon="mdi-help-circle" v-on="on" />
         </template>
       </HelpModal>
-      <v-list-item>
-        <div class="d-flex justify-center">
-          <v-switch label="Light/Dark" v-model="dark" v-on:change="updateDark">
-          </v-switch>
-        </div>
-      </v-list-item>
     </v-list>
   </v-navigation-drawer>
 </template>
@@ -85,19 +79,6 @@ export default class Sidebar extends SidebarProps {
     files = files.sort((a, b) => a.filename.localeCompare(b.filename));
     return files;
   }
-
-  /** Whether or not we're dark mode */
-  dark: boolean = true;
-
-  /** Initial configuration of dark mode */
-  mounted() {
-    this.dark = this.$vuetify.theme.dark;
-  }
-
-  /** Updates theme darkness */
-  updateDark() {
-    this.$vuetify.theme.dark = this.dark;
-  }
 }
 </script>
 

src/components/global/Topbar.vue

@@ -3,13 +3,9 @@
     <!-- The title and nav bar -->
     <v-toolbar-title class="pr-2">
       <v-app-bar-nav-icon @click.stop="$emit('toggle-drawer')">
-        <v-icon color="bar-visible">
-          mdi-menu
-        </v-icon>
+        <v-icon color="bar-visible">mdi-menu</v-icon>
       </v-app-bar-nav-icon>
-      <span class="hidden-sm-and-down bar-visible--text">
-        {{ title }}
-      </span>
+      <span class="hidden-sm-and-down bar-visible--text">{{ title }}</span>
     </v-toolbar-title>
     <v-spacer />
 
@@ -25,6 +21,11 @@
         ></v-img>
       </v-avatar>
     </v-btn>
+    <v-btn icon large v-on:click="toggleDark">
+      <v-icon :color="this.$vuetify.theme.dark ? 'grey' : 'white'"
+        >mdi-theme-light-dark</v-icon
+      >
+    </v-btn>
   </v-app-bar>
 </template>
 
@@ -47,5 +48,19 @@ export default class Topbar extends TopbarProps {
   clear(): void {
     this.$emit("clear");
   }
+
+  /** Updates theme darkness */
+  toggleDark() {
+    this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
+  }
+
+  // FIXME
+  // This seems like it could be useful??
+
+  // if (this.$vuetify.theme.dark) {
+  //   metaThemeColor.setAttribute("content", "#212121");
+  // } else {
+  //   metaThemeColor.setAttribute("content", "#0277bd");
+  // }
 }
 </script>