52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<template>
|
|
<router-view />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useGlobalUIStore } from "@/store/globalUI";
|
|
import { useSettingStore } from "@/store/settingStore";
|
|
|
|
const globalUIStore = useGlobalUIStore();
|
|
const settingStore = useSettingStore();
|
|
|
|
const resolvedThemeMode = computed(() => {
|
|
if (globalUIStore.themeMode === "system") {
|
|
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
return mediaQuery.matches ? "dark" : "light";
|
|
}
|
|
|
|
return globalUIStore.themeMode;
|
|
});
|
|
|
|
async function unlockSoundOnUserGesture(): Promise<void> {
|
|
await settingStore.unlockSoundPlayers();
|
|
}
|
|
|
|
watch(
|
|
() => resolvedThemeMode.value,
|
|
(themeMode) => {
|
|
const rootElement = document.documentElement;
|
|
rootElement.classList.toggle("theme-dark", themeMode === "dark");
|
|
rootElement.dataset.theme = themeMode;
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
watch(
|
|
() => globalUIStore.bodyBackground,
|
|
(bodyBackground) => {
|
|
document.body.style.background = bodyBackground;
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
onMounted(() => {
|
|
settingStore.loadSoundPlayers();
|
|
window.addEventListener("pointerdown", unlockSoundOnUserGesture, { once: true });
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("pointerdown", unlockSoundOnUserGesture);
|
|
});
|
|
</script>
|