63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<template>
|
|
<select
|
|
v-model='selectedFont'
|
|
:disabled='loading'
|
|
@change='updateFont'
|
|
>
|
|
<option
|
|
v-for='(value, key) in fonts'
|
|
:key='key'
|
|
:value='key'
|
|
>
|
|
{{ value.name }}
|
|
</option>
|
|
</select>
|
|
<select
|
|
v-model='selectedTheme'
|
|
:disabled='loading'
|
|
@change='updateTheme'
|
|
>
|
|
<option
|
|
v-for='(value, key) in themes'
|
|
:key='key'
|
|
:value='key'
|
|
>
|
|
{{ value.name }}
|
|
</option>
|
|
</select>
|
|
<NuxtRouteAnnouncer />
|
|
<NuxtPage />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { themes } from '~/types/themes'
|
|
import { fonts } from '~/types/fonts'
|
|
|
|
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>
|