Use Tokyo night theme

Author: davegallant

src/App.vue

@@ -121,6 +121,7 @@ const sortBy = ref([{ key: "score", order: "desc" }]); // Vuetify 3 format
           :sort-by="sortColumn"
           :sort-desc="!ascending"
           v-model:sortBy="sortBy"
+          :items-per-page="25"
         >
           <template #item.title="{ item }">
             <a

src/plugins/vuetify.js

@@ -5,15 +5,31 @@
  */
 
 // Styles
-import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles'
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+
+const tokyoNight = {
+  dark: true,
+  colors: {
+    background: "#1a1b26",
+    surface: "#24283b",
+    primary: "#7aa2f7",
+    secondary: "#b4f9f8",
+    accent: "#ff9e64",
+    error: "#f7768e",
+    info: "#2ac3de",
+    success: "#9ece6a",
+    warning: "#e0af68",
+  },
+};
 
 // Composables
-import { createVuetify } from 'vuetify'
+import { createVuetify } from "vuetify";
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'system',
+    defaultTheme: "tokyoNight",
+    themes: { tokyoNight },
   },
-})
+});

src/theme.css

@@ -9,16 +9,6 @@ html {
   -ms-text-size-adjust: 100%;
 }
 
-a {
-  color: #96ada5; /**/
-}
-a:visited {
-  color: #53514f; /**/
-}
-a:hover {
-  color: #d65d03; /**/
-}
-
 footer {
   background: #212529;
   color: white;
@@ -36,9 +26,27 @@ footer {
 }
 
 .green-score {
-  color: rgb(22, 120, 63) !important;
+  color: rgb(158, 206, 106) !important;
 }
 
 .red-score {
-  color: rgb(175, 21, 21) !important;
+  color: rgb(247, 118, 142) !important;
+}
+
+a {
+  color: var(--v-theme-primary);
+}
+
+a:hover {
+  color: #d65d03;
+}
+
+a:visited {
+  color: #53514f;
+}
+
+.v-data-table-header th,
+.v-data-table__td,
+.v-data-footer {
+  font-size: 1.2rem;
 }