56 lines
No EOL
1.8 KiB
Vue
56 lines
No EOL
1.8 KiB
Vue
<script setup lang="ts">
|
|
const theme: Ref<string> = ref("mocha");
|
|
|
|
import Card from './Card.vue';
|
|
onBeforeMount(() => {
|
|
theme.value = localStorage.getItem("theme") || "mocha";
|
|
document.documentElement.setAttribute("data-theme", theme.value);
|
|
});
|
|
const availableThemes = [
|
|
"mocha",
|
|
"latte",
|
|
"yule-night",
|
|
"yule-day",
|
|
"midsummer-twilight",
|
|
"midsummer-daylight",
|
|
"fireworks-night",
|
|
"parade-day",
|
|
"harvest-twilight",
|
|
"golden-hour",
|
|
"stargazer",
|
|
"daydreamer",
|
|
];
|
|
|
|
const changeTheme = (newTheme: string) => {
|
|
theme.value = newTheme;
|
|
document.documentElement.setAttribute("data-theme", newTheme);
|
|
localStorage.setItem("theme", newTheme);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="flex justify-center">
|
|
<Card class="flex flex-wrap justify-center max-w-[40rem] border border-border">
|
|
<NuxtLink to="/">Home</NuxtLink>
|
|
<NuxtLink to="/servers">Servers</NuxtLink>
|
|
<NuxtLink to="/diagnostics">Diagnostics</NuxtLink>
|
|
<NuxtLink to="/projects">Projects</NuxtLink>
|
|
<a href="https://vtt.smgames.club" 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>
|
|
<!-- Icon inline dropdown for theme switching (use paint palette icon) -->
|
|
<!-- Only show an icon, no title or label -->
|
|
<select v-model="theme" @change="changeTheme(theme)">
|
|
<option v-for="t in availableThemes" :key="t" :value="t">{{ t }}</option>
|
|
</select>
|
|
<HueComputer :key=theme />
|
|
</Card>
|
|
</nav>
|
|
</template>
|
|
|
|
<style>
|
|
a {
|
|
@apply m-2
|
|
}
|
|
</style> |