Implemented experimental dark mode

frontend/src/App.vue

 <template>
   <div id="app">
-    <v-app>
+    <v-app :dark="darkMode">
       <notifications/>
       <router-view/>
       <auto-logout/>
@@ -13,7 +13,12 @@
 
   export default {
     components: {AutoLogout},
-    name: 'app'
+    name: 'app',
+    computed: {
+      darkMode () {
+        return this.$store.state.ui.darkMode
+      }
+    }
   }
 </script>
 

frontend/src/components/BaseLayout.vue

@@ -56,6 +56,8 @@
         </router-link>
       </v-toolbar-title>
       <span class="pl-2 grady-speak">{{ gradySpeak }}</span>
+      <v-spacer/>
+      <slot name="toolbar-center"/>
       <div class="toolbar-content">
         <span>{{ userRole }} | {{ username }}</span>
       </div>

frontend/src/components/SubmissionType.vue

@@ -6,15 +6,17 @@
         <v-expansion-panel-content
           v-for="(item, i) in typeItems"
           :key="i"
-          :value="expandedByDefault[item.title]">
+          :value="expandedByDefault[item.title]"
+        >
           <div slot="header"><b>{{ item.title }}</b></div>
           <v-card
             v-if="item.title === 'Description'"
-            color="grey lighten-4">
+            class="type-description"
+          >
             <v-card-text class="ml-2">
-            <span
-              v-html="item.text"
-            ></span>
+              <span
+                v-html="item.text"
+              ></span>
             </v-card-text>
           </v-card>
           <v-flex v-else-if="item.title === 'Solution'">
@@ -31,6 +33,7 @@
 
 
 <script>
+  import {mapState} from 'vuex'
   import {highlight} from 'highlight.js'
   export default {
     name: 'submission-type',
@@ -70,6 +73,9 @@
       }
     },
     computed: {
+      ...mapState({
+        darkMode: state => state.ui.darkMode
+      }),
       typeItems () {
         let items = [
           {
@@ -89,15 +95,21 @@
       },
       highlightedSolution () {
         return highlight(this.programming_language, this.solution, true).value
+      },
+      backgroundColor () {
+        return this.darkMode ? 'grey' : '#F3F3F3'
       }
     }
   }
 </script>
 
-<style scoped>
+<style>
   .solution-code {
     border-width: 0px;
     white-space: pre-wrap;
   }
+  .type-description code {
+    background-color: lightgrey;
+  }
 </style>
 

frontend/src/components/submission_notes/base/FeedbackComment.vue

 <template>
   <div class="dialog-box">
-    <div class="body elevation-1" :style="{borderColor: borderColor}">
+    <div class="body elevation-1" :style="{borderColor: borderColor, backgroundColor}">
       <span class="tip tip-up" :style="{borderBottomColor: borderColor}"></span>
       <span v-if="of_tutor" class="of-tutor">Of tutor: {{of_tutor}}</span>
       <span class="comment-created">{{parsedCreated}}</span>
@@ -74,7 +74,8 @@
     },
     computed: {
       ...mapState({
-        markedForDeletion: state => state.submissionNotes.commentsMarkedForDeletetion
+        markedForDeletion: state => state.submissionNotes.commentsMarkedForDeletetion,
+        darkMode: state => state.ui.darkMode
       }),
       parsedCreated () {
         if (this.created) {
@@ -88,6 +89,9 @@
           return this.markedForDeletion.hasOwnProperty(this.pk) ? '#B5B5B5' : '#3D8FC1'
         }
         return 'orange'
+      },
+      backgroundColor () {
+        return this.darkMode ? 'grey' : '#F3F3F3'
       }
     },
     methods: {
@@ -127,7 +131,6 @@
     height: auto;
     margin: 20px 10px 10px 10px;
     padding: 5px;
-    background-color: #F3F3F3;
     border-radius: 0px;
     border: 2px solid;
   }

frontend/src/pages/base/TutorReviewerBaseLayout.vue

@@ -23,6 +23,15 @@
       <subscription-list :sidebar="true"/>
       <slot name="below-subscriptions"></slot>
     </template>
+    <template slot="toolbar-center">
+      <v-tooltip left class="mr-5" style="min-width: 150px">
+        <v-switch
+          class="dark-mode-switch"
+          slot="activator"
+          v-model="darkMode" label="dark mode"/>
+        <span>Experimental: styling issues may occur!</span>
+      </v-tooltip>
+    </template>
     <template slot="toolbar-right"><slot name="toolbar-right"></slot></template>
   </base-layout>
 </template>
@@ -31,6 +40,8 @@
 <script>
   import BaseLayout from '@/components/BaseLayout'
   import SubscriptionList from '@/components/subscriptions/SubscriptionList'
+  import { uiMut } from '@/store/modules/ui'
+  import { createComputedGetterSetter } from '@/util/helpers'
 
   export default {
     components: {
@@ -52,7 +63,20 @@
           }
         ]
       }
+    },
+    computed: {
+      darkMode: createComputedGetterSetter({
+        path: 'ui.darkMode',
+        mutation: uiMut.SET_DARK_MODE
+      })
     }
   }
 </script>
 
+<style scoped>
+  .dark-mode-switch {
+    max-width: 150px;
+    position: absolute;
+    top: -15px;
+  }
+</style>

frontend/src/store/modules/ui.js

 
 function initialState () {
   return {
-    sideBarCollapsed: false
+    sideBarCollapsed: false,
+    darkMode: false
   }
 }
 
 export const uiMut = Object.freeze({
-  SET_SIDEBAR_COLLAPSED: 'SET_SIDEBAR_COLLAPSED'
+  SET_SIDEBAR_COLLAPSED: 'SET_SIDEBAR_COLLAPSED',
+  SET_DARK_MODE: 'SET_DARK_MODE'
 })
 
 const ui = {
@@ -14,6 +16,9 @@ const ui = {
   mutations: {
     [uiMut.SET_SIDEBAR_COLLAPSED] (state, collapsed) {
       state.sideBarCollapsed = collapsed
+    },
+    [uiMut.SET_DARK_MODE] (state, val) {
+      state.darkMode = val
     }
   }
 }