Files
Timetable-V2/src/views/settings/AppearanceSettings.vue
2023-08-27 15:37:18 +02:00

43 lines
928 B
Vue

<script setup>
import { theme } from "@/store";
import RadioButtons from "@/components/settings/radio-buttons.vue";
import i18n, { language, localeNames } from "@/i18n";
</script>
<template>
<h2>{{ $t("settings.heading.theme") }}</h2>
<p>{{ $t("settings.text.theme") }}</p>
<RadioButtons
:options="[
$t('settings.theme.auto'),
$t('settings.theme.light'),
$t('settings.theme.dark'),
$t('settings.theme.darker'),
]"
:values="['auto', 'light', 'dark', 'darker']"
v-model="theme"
/>
<div class="spacer" />
<h2>{{ $t("settings.heading.language") }}</h2>
<p>{{ $t("settings.text.language") }}</p>
<RadioButtons
:options="i18n.global.availableLocales.map((locale) => localeNames[locale])"
:values="i18n.global.availableLocales"
v-model="language"
/>
</template>
<style scoped>
h2 {
margin: 0px;
}
p {
margin: 5px 0px;
}
.spacer {
height: 20px;
}
</style>