57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import type { ThemeMode } from "@/composables/useTheme";
|
|
|
|
const { t } = useI18n();
|
|
const { theme } = useTheme();
|
|
|
|
const themes: { value: ThemeMode; label: string }[] = [
|
|
{ value: "light", label: t("settings.themeLight") },
|
|
{ value: "dark", label: t("settings.themeDark") },
|
|
{ value: "auto", label: t("settings.themeAuto") },
|
|
];
|
|
|
|
function handleThemeChange(event: CustomEvent) {
|
|
const themeMode = event.detail.value as ThemeMode;
|
|
theme.value = themeMode;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header>
|
|
<ion-toolbar class="ui-toolbar">
|
|
<ion-back-button slot="start" />
|
|
<ion-title>{{ t("settings.theme") }}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content :fullscreen="true" class="ion-padding">
|
|
<ion-list lines="full">
|
|
<ion-radio-group :value="theme" @ion-change="handleThemeChange">
|
|
<ion-item v-for="item in themes" :key="item.value">
|
|
<ion-radio :value="item.value">
|
|
<div class="theme-item">
|
|
<div class="font-semibold">
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
</ion-radio>
|
|
</ion-item>
|
|
</ion-radio-group>
|
|
</ion-list>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
@reference "tailwindcss";
|
|
|
|
.theme-item {
|
|
@apply py-1;
|
|
}
|
|
|
|
ion-radio {
|
|
width: 100%;
|
|
}
|
|
</style>
|