From eca68ec4c2ad4d83845f0862dd2b8ffed07b49be Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Tue, 2 Jul 2024 11:57:36 +0200
Subject: [PATCH] feat:#20 refactored theme switch

---
 frontend/src/App.vue          |  9 ++++----
 frontend/src/helpers/theme.ts | 40 ++++++++++++++++++++++++-----------
 frontend/src/main.ts          |  2 --
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 843c0d8..ff32417 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -54,7 +54,6 @@ const updateMobile = () => {
 };
 
 updateMobile();
-
 window.addEventListener("resize", updateMobile);
 
 const settings = settingsStore();
@@ -62,13 +61,13 @@ const emit = defineEmits(["dark-mode-toggled"]);
 
 onMounted(() => {
 // set theme matching browser preference
-  setTheme(settings, primeVue, emit, (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches));
-
+  settings.setDarkMode(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches)
+  setTheme(settings, primeVue, emit);
   window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
-    setTheme(settings, primeVue, emit, e.matches);
+    settings.setDarkMode(e.matches)
+    setTheme(settings, primeVue, emit);
   });
 });
-
 </script>
 
 <template>
diff --git a/frontend/src/helpers/theme.ts b/frontend/src/helpers/theme.ts
index 221e735..43b0c8f 100644
--- a/frontend/src/helpers/theme.ts
+++ b/frontend/src/helpers/theme.ts
@@ -15,21 +15,37 @@
 //along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import { ref } from "vue";
+import { Store } from "pinia";
+import { PrimeVueChangeTheme } from "primevue/config";
+import { EmitFn } from "primevue/ts-helpers";
+import { RemovableRef } from "@vueuse/core";
 
 const darkTheme = ref("lara-dark-blue"),
-  lightTheme = ref("lara-light-blue");
+    lightTheme = ref("lara-light-blue");
 
+type SettingsStore = Store<"settingsStore", { locale: RemovableRef<string>, isDark: boolean }, NonNullable<unknown>, {
+    setLocale(locale: string): void,
+    setDarkMode(isDark: boolean): void,
+    getDarkMode(): boolean
+}>;
 
-export function toggleTheme(store, primeVue, emit): void {
-  store.setDarkMode(!store.isDark);
-  setTheme(store, primeVue, emit);
+export function toggleTheme(
+    store: SettingsStore,
+    primeVue: { changeTheme: PrimeVueChangeTheme },
+    emit: EmitFn<"dark-mode-toggled"[]>,
+): void {
+    store.setDarkMode(!store.isDark);
+    setTheme(store, primeVue, emit);
 }
 
-export function setTheme(store, primeVue, emit, shouldBeDark: boolean) {
-  store.setDarkMode(shouldBeDark);
-  const isDark = ref(store.isDark);
-  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);
-}
+export function setTheme(
+    store: SettingsStore,
+    { changeTheme }: { changeTheme: PrimeVueChangeTheme },
+    emit: EmitFn<"dark-mode-toggled"[]>
+) {
+    const isDark = ref(store.isDark);
+    const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
+        oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
+    changeTheme(oldTheme, newTheme, "theme-link", () => { });
+    emit("dark-mode-toggled", isDark.value);
+}
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e39265d..9039afc 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -58,8 +58,6 @@ import i18n from "./i18n";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
-import { setTheme } from "@/helpers/theme.ts";
-import settingsStore from "@/store/settingsStore.ts";
 
 polyfillCountryFlagEmojis();