init project

src/Root.vue

@@ -0,0 +1,51 @@
+<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>