feat:#20 refactored theme switch

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>

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 {
+export function toggleTheme(
-  store.setDarkMode(!store.isDark);
+    store: SettingsStore,
-  setTheme(store, primeVue, emit);
+    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) {
+export function setTheme(
-  store.setDarkMode(shouldBeDark);
+    store: SettingsStore,
-  const isDark = ref(store.isDark);
+    { changeTheme }: { changeTheme: PrimeVueChangeTheme },
-  const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
+    emit: EmitFn<"dark-mode-toggled"[]>
-    oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
+) {
-  primeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
+    const isDark = ref(store.isDark);
-  emit("dark-mode-toggled", isDark.value);
+    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);
+}

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();