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>

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>

frontend/src/components/RoomOccupation.vue

@@ -169,7 +169,7 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
           id: event.id.toString(),
           start: event.start,
           end: event.end,
-          color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
+          color: event.showFree ? "var(--htwk-gruen-500)" : "var(--primary-color)",
           textColor: event.showFree
             ? "var(--green-50)"
             : "var(--primary-color-text)",