feat:#47 finished theme update

frontend/src/components/MenuBar.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
 import DarkModeSwitcher from "./DarkModeSwitcher.vue";
 const { t } = useI18n({ useScope: "global" });
 
+const isDark = ref(true);
+
 const items = computed(() => [
   {
     label: t("createCalendar"),
@@ -49,6 +51,13 @@ const items = computed(() => [
     url: "https://www.htwk-leipzig.de/hochschule/kontakt/datenschutzerklaerung/",
   },
 ]);
+
+function handleDarkModeToggled(isDarkVar: boolean) {
+  // Do something with isDark value
+  // For example, update the root isDark value
+  // Assuming the root component has an isDark ref
+  isDark.value = isDarkVar;
+}
 </script>
 
 <template>
@@ -56,7 +65,8 @@ const items = computed(() => [
     <template #start>
       <router-link v-slot="{ navigate }" :to="`/`" custom>
         <Button severity="secondary" text class="p-0 mx-2" @click="navigate">
-          <img width="50" height="50" src="../../public/htwk.svg" alt="Logo" />
+          <img v-if="isDark" width="50" height="50" src="../../public/htwk.svg" alt="Logo" />
+          <img v-else width="50" height="50" src="../../public/htwk-blue.svg" alt="Logo" />
         </Button>
       </router-link>
     </template>
@@ -96,7 +106,7 @@ const items = computed(() => [
     </template>
     <template #end>
       <div class="flex align-items-stretch justify-content-center">
-        <DarkModeSwitcher></DarkModeSwitcher>
+        <DarkModeSwitcher @dark-mode-toggled="handleDarkModeToggled"></DarkModeSwitcher>
         <LocaleSwitcher></LocaleSwitcher>
       </div>
     </template>