fix:#20 first fix auto dark mode switch

frontend/src/components/DarkModeSwitcher.vue

@@ -17,43 +17,19 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { toggleTheme } from "@/helpers/theme.ts";
+import settingsStore from "@/store/settingsStore.ts";
+import { computed } from "vue";
 import { usePrimeVue } from "primevue/config";
 
-const PrimeVue = usePrimeVue();
+const primeVue = usePrimeVue();
 
 const emit = defineEmits(["dark-mode-toggled"]);
 
-const isDark = ref(true);
-const darkTheme = ref("lara-dark-blue"),
-  lightTheme = ref("lara-light-blue");
+const store = settingsStore();
 
-function toggleTheme() {
-  isDark.value = !isDark.value;
-  setTheme(isDark.value);
-}
+const isDark = computed(() => store.isDark);
 
-function setTheme(shouldBeDark: boolean) {
-  isDark.value = shouldBeDark;
-  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);
-}
-
-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);
-    });
-});
 </script>
 
 <template>
@@ -63,7 +39,7 @@ onMounted(() => {
     class="p-button-rounded md:w-auto"
     style="margin-right: 1rem"
     :severity="isDark ? 'warning' : 'success'"
-    @click="toggleTheme()"
+    @click="toggleTheme(store, primeVue, emit)"
   >
     <i v-if="isDark" class="pi pi-sun"></i>
     <i v-else class="pi pi-moon"></i>

frontend/src/components/LocaleSwitcher.vue

@@ -18,7 +18,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import localeStore from "../store/localeStore.ts";
+import settingsStore from "../store/settingsStore.ts";
 import { useI18n } from "vue-i18n";
 import { usePrimeVue } from "primevue/config";
 import primeVue_de from "@/i18n/translations/primevue/prime_vue_local_de.json";
@@ -43,7 +43,7 @@ function displayCountry(code: string) {
 const primeVueConfig = usePrimeVue();
 
 function updateLocale(locale: string) {
-  localeStore().setLocale(locale);
+  settingsStore().setLocale(locale);
 
   if (locale === "de") {
     primeVueConfig.config.locale = primeVue_de;
@@ -54,7 +54,7 @@ function updateLocale(locale: string) {
   }
 }
 
-updateLocale(localeStore().locale);
+updateLocale(settingsStore().locale);
 </script>
 <template>
   <Dropdown