Added vuetify with same config as frontend

package-lock.json

@@ -1108,6 +1108,12 @@
         "postcss": "^7.0.0"
       }
     },
+    "@mdi/font": {
+      "version": "5.9.55",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-5.9.55.tgz",
+      "integrity": "sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg==",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -11382,6 +11388,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.4.11.tgz",
+      "integrity": "sha512-xFNwr95tFRfbyGNg5DBuUkWaKazMBr+ptzoSSL4PGrI0qItY5Vuusxh+ETPtjUXxwz76v5zVtGvF5rWvGQjy7A=="
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",

package.json

@@ -14,9 +14,11 @@
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "vuetify": "^2.4.11",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@mdi/font": "^5.9.55",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-pwa": "~4.5.0",

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import './registerServiceWorker'
 import router from './router'
 import store from './store'
+import vuetify from './plugins/vuetify'
 
 Vue.config.productionTip = false
 
@@ -10,5 +11,6 @@ Vue.config.productionTip = false
 new Vue({
   router,
   store,
+  vuetify,
   render: h => h(App)
 }).$mount('#app')

src/plugins/vuetify.js

@@ -0,0 +1,43 @@
+import '@mdi/font/css/materialdesignicons.css'
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+
+Vue.use(Vuetify)
+
+let darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+let hasDarkMode = localStorage.getItem('darkModeEnabled')
+if (!hasDarkMode && darkMediaQuery) {
+    localStorage.setItem('darkModeEnabled', 'dark')
+}
+
+export default new Vuetify({
+    icons: {
+        iconfont: 'mdi'
+    },
+    theme: {
+        dark: localStorage.getItem('darkModeEnabled') === 'dark',
+        themes: {
+            light: {
+                primary: '#047EFB', //blue
+                secondary: '#7BBCFF', //light blue
+                accent: '#FCF25E', //yellow
+                error: '#FF5555', //red
+                warning: '#FF9100', //orange
+                info: '#313BCF', //dark blue
+                success: '#4caf50',
+                background: '#eeeeee',
+                text: '#FFFFFF'
+            },
+            dark: {
+                primary: '#047EFB', //blue
+                secondary: '#7BBCFF', //light blue
+                accent: '#FCF25E', //yellow
+                error: '#FF5555', //red
+                warning: '#FF9100', //orange
+                info: '#313BCF', //dark blue
+                success: '#4caf50',
+                background: '#3a3b3c'
+            }
+        }
+    }
+})