HTWK/htwkalender-pwa
1
0
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git synced 2025-07-16 09:38:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:#20 refactored theme switch

Browse Source
This commit is contained in:
Elmar Kresse
2024-07-02 11:57:36 +02:00
parent 4f50f3a7c3
commit eca68ec4c2
3 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.vue
View File

@ -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>

38
frontend/src/helpers/theme.ts
View File

@ -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);
}

2
frontend/src/main.ts
View File

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