mrrpnya
39739d0444
Some checks failed
Run Tests / unit-tests (pull_request) Has been cancelled
Run Tests / cypress-tests (chrome) (pull_request) Has been cancelled
Run Tests / cypress-tests (edge) (pull_request) Has been cancelled
Run Tests / cypress-tests (firefox) (pull_request) Has been cancelled
Run Tests / install (pull_request) Has been cancelled
Run Tests / install (push) Failing after 7m36s
Run Tests / unit-tests (push) Has been skipped
Run Tests / cypress-tests (chrome) (push) Has been skipped
Run Tests / cypress-tests (edge) (push) Has been skipped
Run Tests / cypress-tests (firefox) (push) Has been skipped
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>
|