VueRouter, Pinia state management, add pages, design preferences page

software/src/plugins/pinia.ts

@@ -0,0 +1,5 @@
+import { createPinia } from "pinia"
+
+const pinia = createPinia()
+
+export default pinia

software/src/plugins/router.ts

@@ -0,0 +1,10 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from './../router/routes'
+
+// Router configuration
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

software/src/plugins/vuetify.ts

@@ -4,13 +4,58 @@ import '@mdi/font/css/materialdesignicons.css'
 import { createVuetify } from 'vuetify/lib/framework.mjs'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
+import colors from 'vuetify/util/colors'
 
 // Vuetify config
 const vuetify = createVuetify({
   components,
   directives,
   theme: {
-    defaultTheme: 'dark'
+    defaultTheme: 'dark',
+    themes: {
+      darkRed: {
+        dark: true,
+        colors: {
+          primary: colors.red.darken1,
+          secondary: colors.red.lighten2
+        }
+      },
+            lightRed: {
+        dark: false,
+        colors: {
+          primary: colors.red.darken1,
+          secondary: colors.red.darken4
+        }
+      },
+      darkBlue: {
+        dark: true,
+        colors: {
+          primary: colors.blue.darken1,
+          secondary: colors.blue.lighten2
+        }
+      },
+      lightBlue: {
+        dark: false,
+        colors: {
+          primary: colors.blue.darken1,
+          secondary: colors.blue.darken4
+        }
+      },
+      darkGreen: {
+        dark: true,
+        colors: {
+          primary: colors.green.darken1,
+          secondary: colors.green.lighten2
+        }
+      },
+      lightGreen: {
+        dark: false,
+        colors: {
+          primary: colors.green.darken1,
+          secondary: colors.green.darken4
+        }
+      }
+    }
   }
 })