feat:#47 finished theme update

frontend/src/components/DarkModeSwitcher.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { usePrimeVue } from "primevue/config";
 
 const PrimeVue = usePrimeVue();
 
+const emit = defineEmits(["dark-mode-toggled"]);
+
 const isDark = ref(true);
 const darkTheme = ref("lara-dark-blue"),
   lightTheme = ref("lara-light-blue");
@@ -18,19 +20,22 @@ function setTheme(shouldBeDark: boolean) {
   const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
     oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
   PrimeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
+  emit("dark-mode-toggled", isDark.value);
 }
 
-// set theme matching browser preference
-setTheme(
-  window.matchMedia &&
+onMounted(() => {
+  // set theme matching browser preference
+  setTheme(
+    window.matchMedia &&
     window.matchMedia("(prefers-color-scheme: dark)").matches,
-);
+  );
 
-window
-  .matchMedia("(prefers-color-scheme: dark)")
-  .addEventListener("change", (e) => {
-    setTheme(e.matches);
-  });
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (e) => {
+      setTheme(e.matches);
+    });
+});
 </script>
 
 <template>
@@ -40,7 +45,7 @@ window
     class="p-button-rounded w-full md:w-auto"
     style="margin-right: 1rem"
     :severity="isDark ? 'warning' : 'info'"
-    @click="toggleTheme"
+    @click="toggleTheme();"
   >
     <i v-if="isDark" class="pi pi-sun"></i>
     <i v-else class="pi pi-moon"></i>