pupbrained-xyz-nuxt/app.vue
2024-08-25 20:36:40 -04:00

82 lines
1.5 KiB
Vue

<template>
<select
v-model='selectedFont'
:disabled='loading'
@change='updateFont'
>
<option
value=''
disabled
>
Select a font...
</option>
<option value='JetBrains Mono'>
JetBrains Mono
</option>
<option value='Source Code Pro'>
Source Code Pro
</option>
<option value='Fira Code'>
Fira Code
</option>
<option value='Ubuntu Mono'>
Ubuntu Mono
</option>
</select>
<select
v-model='selectedTheme'
:disabled='loading'
@change='updateTheme'
>
<option
value=''
disabled
>
Select a theme...
</option>
<option value='catppuccin-latte'>
Catppuccin Latte
</option>
<option value='catppuccin-frappe'>
Catppuccin Frappe
</option>
<option value='catppuccin-macchiato'>
Catppuccin Macchiato
</option>
<option value='catppuccin-mocha'>
Catppuccin Mocha
</option>
</select>
<NuxtRouteAnnouncer />
<NuxtPage />
</template>
<script setup>
const { theme, setTheme } = useTheme()
const selectedTheme = ref('')
const { font, setFont } = useFont()
const selectedFont = ref('')
const loading = ref(true)
onMounted(() => {
selectedTheme.value = theme.value
selectedFont.value = font.value
loading.value = false
})
const updateTheme = () => {
setTheme(selectedTheme.value)
}
const updateFont = () => {
setFont(selectedFont.value)
}
useHead({
bodyAttrs: {
class: 'bg-bg',
},
})
</script>