64 lines
1.8 KiB
Vue
Executable file
64 lines
1.8 KiB
Vue
Executable file
<script setup lang="ts">
|
|
import { RouterLink, RouterView } from 'vue-router';
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
// Theme state and available themes
|
|
const theme = ref(localStorage.getItem("theme") || "mocha");
|
|
const availableThemes = [
|
|
"mocha",
|
|
"latte",
|
|
"yule-night",
|
|
"yule-day",
|
|
"midsummer-twilight",
|
|
"midsummer-daylight",
|
|
"fireworks-night",
|
|
"parade-day",
|
|
"harvest-twilight",
|
|
"golden-hour",
|
|
"stargazer",
|
|
"daydreamer",
|
|
];
|
|
|
|
// Apply theme
|
|
onMounted(() => {
|
|
document.documentElement.setAttribute("data-theme", theme.value);
|
|
});
|
|
|
|
// Change theme function
|
|
const changeTheme = (newTheme: string) => {
|
|
theme.value = newTheme;
|
|
document.documentElement.setAttribute("data-theme", newTheme);
|
|
localStorage.setItem("theme", newTheme);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div id="app">
|
|
<!-- Header and Navigation -->
|
|
<header>
|
|
<nav class="nav-bar">
|
|
<div class="nav-links">
|
|
<RouterLink to="/">Home</RouterLink>
|
|
<RouterLink to="/servers">Servers</RouterLink>
|
|
<RouterLink to="/projects">Projects</RouterLink>
|
|
<a href="https://foundryvtt.example.com" target="_blank">Foundry VTT</a>
|
|
<a href="https://oekaki.smgames.club" target="_blank">Oekaki</a>
|
|
<a href="https://social.smgames.club/" target="_blank">Social</a>
|
|
<a href="https://madstar.studio" target="_blank">Shop</a>
|
|
</div>
|
|
<!-- Theme Selector -->
|
|
<div class="theme-selector">
|
|
<label for="theme-switcher">Theme:</label>
|
|
<select id="theme-switcher" v-model="theme" @change="changeTheme(theme)">
|
|
<option v-for="t in availableThemes" :key="t" :value="t">{{ t }}</option>
|
|
</select>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
<RouterView />
|
|
</main>
|
|
</div>
|
|
</template>
|