Update colours and fix errors in console

index.html

@@ -17,13 +17,7 @@
     <link rel="icon" href="/favicon.png" />
     
     <!-- Load Material Symbols font with optimal display settings -->
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href="https://fonts.gstatic.com/s/materialsymbolsoutlined/v211/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhQcyWwg.woff2"
-      crossorigin
-    />
+
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"

src/App.vue

@@ -3,7 +3,6 @@ import axios from "axios";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { ref } from "vue";
-import { useTheme } from 'vuetify';
 
 import "vue-loading-overlay/dist/css/index.css";
 
@@ -48,9 +47,6 @@ export default {
   },
   methods: {
     initializeTheme() {
-      // Get Vuetify theme instance
-      this.vuetifyTheme = useTheme();
-
       // If no saved preference, apply system preference now
       const savedTheme = localStorage.getItem('vuetify-theme');
       if (!savedTheme) {
@@ -59,7 +55,7 @@ export default {
         this.applyTheme(theme);
       } else {
         // Get current theme name from Vuetify
-        this.currentTheme = this.vuetifyTheme.global.name.value;
+        this.currentTheme = this.$vuetify.theme.global.name;
       }
     },
     setupThemeListener() {
@@ -85,17 +81,11 @@ export default {
       this.darkModeQuery = darkModeQuery;
     },
     applyTheme(theme) {
-      // Get theme instance if not already stored
-      if (!this.vuetifyTheme) {
-        this.vuetifyTheme = useTheme();
-      }
-
       // Apply theme using Vuetify's theme API
-      this.vuetifyTheme.global.name.value = theme;
+      this.$vuetify.theme.global.name = theme;
       this.currentTheme = theme;
       localStorage.setItem('vuetify-theme', theme);
-      console.log('Theme applied:', theme);
-
+      
       // Also update data-bs-theme for any custom CSS that uses it
       document.documentElement.setAttribute('data-bs-theme', theme === 'dark' ? 'dark' : 'light');
     },
@@ -211,7 +201,7 @@ export default {
     formatDate() {
       return (v) => {
         const date = dayjs(String(v));
-        return date.format("hh:mm A (MM/DD)");
+        return date.format("YYYY-MM-DD hh:mm A");
       };
     },
     filteredTopics() {
@@ -491,11 +481,11 @@ html[data-bs-theme="light"] :deep(.v-text-field) {
 }
 
 html[data-bs-theme="light"] :deep(.v-field__input) {
-  background-color: #fafafa !important;
+  background-color: #d0d0d0 !important;
 }
 
 html[data-bs-theme="light"] :deep(.v-field--focused .v-field__input) {
-  background-color: #ffffff !important;
+  background-color: #e8e8e8 !important;
 }
 
 html[data-bs-theme="dark"] :deep(.v-text-field) {

src/main.js

@@ -6,7 +6,12 @@ import "./theme.css";
 
 import { registerPlugins } from "@/plugins";
 
-const routes = [];
+const routes = [
+  {
+    path: '/:pathMatch(.*)*',
+    component: App,
+  },
+];
 
 const router = createRouter({
   history: createWebHashHistory(),

src/theme.css

@@ -1,12 +1,3 @@
-/* Material Symbols font optimization - prevent flash of unstyled text */
-@font-face {
-  font-family: 'Material Symbols Outlined';
-  src: url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v211/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhQcyWwg.woff2') format('woff2');
-  font-weight: 100 700;
-  font-style: normal;
-  font-display: block;
-}
-
 .material-symbols-outlined {
   font-family: 'Material Symbols Outlined';
   font-weight: normal;
@@ -33,8 +24,7 @@
   --tooltip-border: #dee2e6;
   --tooltip-text: #212529;
   --link-color: #0d6efd;
-  --link-hover: #0b5ed7;
-  --link-visited: #6f42c1;
+  --link-visited: #990000;
   --footer-bg: #f8f9fa;
   --footer-text: #212529;
 }
@@ -51,8 +41,7 @@
     --tooltip-border: #444444;
     --tooltip-text: #e0e0e0;
     --link-color: #5b9cf5;
-    --link-hover: #60a5fa;
-    --link-visited: #888888;
+    --link-visited: #990000;
     --footer-bg: #1a1a1a;
     --footer-text: #e0e0e0;
   }
@@ -69,8 +58,7 @@ html[data-bs-theme="dark"] {
   --tooltip-border: #444444;
   --tooltip-text: #e0e0e0;
   --link-color: #e8e8e8;
-  --link-hover: #60a5fa;
-  --link-visited: #888888;
+  --link-visited: #990000;
   --footer-bg: #1a1a1a;
   --footer-text: #e0e0e0;
 }
@@ -85,8 +73,7 @@ html[data-bs-theme="light"] {
   --tooltip-border: #dee2e6;
   --tooltip-text: #212529;
   --link-color: #333333;
-  --link-hover: #0b5ed7;
-  --link-visited: #6f42c1;
+  --link-visited: #990000;
   --footer-bg: #f8f9fa;
   --footer-text: #212529;
 }
@@ -143,9 +130,7 @@ a {
   transition: color 0.2s ease;
 }
 
-a:hover {
-  color: var(--link-hover);
-}
+
 
 a:visited {
   color: var(--link-visited);
@@ -244,4 +229,4 @@ a:visited {
   border-top: 1px solid var(--border-color);
   padding-top: 8px;
   margin-top: 8px;
-}
+}