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

fix:#20 first fix auto dark mode switch

Browse Source
This commit is contained in:
Elmar Kresse
2024-07-02 11:01:44 +02:00
parent 112a692790
commit 4f50f3a7c3
7 changed files with 83 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/App.vue
View File

@ -21,8 +21,13 @@ import MenuBar from "./components/MenuBar.vue";
import { RouteRecordName, RouterView } from "vue-router";
import CalendarPreview from "./components/CalendarPreview.vue";
import moduleStore from "./store/moduleStore.ts";
import { provide, ref } from "vue";
import { onMounted, provide, ref } from "vue";
import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
import settingsStore from "@/store/settingsStore.ts";
import { setTheme } from "@/helpers/theme.ts";
import { usePrimeVue } from "primevue/config";
const primeVue = usePrimeVue();
const disabledPages = [
"room-finder",
@ -33,7 +38,7 @@ const disabledPages = [
"edit-calendar",
"rooms",
"free-rooms",
"room-schedule",
"room-schedule"
];
const store = moduleStore();
@ -51,12 +56,25 @@ const updateMobile = () => {
updateMobile();
window.addEventListener("resize", updateMobile);
const settings = settingsStore();
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));
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
setTheme(settings, primeVue, emit, e.matches);
});
});
</script>
<template>
<MenuBar />
<RouterView v-slot="{ Component, route }">
<transition name="scale" mode="out-in">
<transition mode="out-in" name="scale">
<div :key="route.name ?? ''" class="origin-near-top">
<component :is="Component" />
</div>