mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 15:54:03 +01:00
96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
const { t } = useI18n({ useScope: 'local' })
|
|
const { dark, toggleDark } = useTheme()
|
|
</script>
|
|
|
|
<template>
|
|
<section class="space-y-4">
|
|
<div class="prose dark:prose-invert">
|
|
<p>{{ t('response.control') }}</p>
|
|
<ul>
|
|
<li>{{ t('response.choose') }}</li>
|
|
<i18n-t keypath="response.kbd" tag="li">
|
|
<template #kbd>
|
|
<UKbd>T</UKbd>
|
|
</template>
|
|
</i18n-t>
|
|
</ul>
|
|
</div>
|
|
<ClientOnly>
|
|
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center' }">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon v-if="dark" name="i-ph-moon-duotone" size="24" />
|
|
<UIcon v-else name="i-ph-sun-duotone" size="24" />
|
|
<span>{{ t('switch') }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-muted">{{ t('light') }}</span>
|
|
<USwitch
|
|
v-model="dark"
|
|
color="neutral"
|
|
size="lg"
|
|
aria-label="switch theme"
|
|
@click.prevent="toggleDark"
|
|
/>
|
|
<span class="text-xs text-muted">{{ t('dark') }}</span>
|
|
</div>
|
|
</UCard>
|
|
</ClientOnly>
|
|
</section>
|
|
</template>
|
|
|
|
<i18n lang="json">
|
|
{
|
|
"en": {
|
|
"switch": "Switch theme",
|
|
"light": "Light",
|
|
"dark": "Dark",
|
|
"response": {
|
|
"control": "I added the theme toggle control above so you can switch directly.",
|
|
"choose": "Choose Light (sun icon) or Dark (moon icon)",
|
|
"kbd": "Press {kbd} on your keyboard"
|
|
}
|
|
},
|
|
"fr": {
|
|
"switch": "Changer de thème",
|
|
"light": "Clair",
|
|
"dark": "Sombre",
|
|
"response": {
|
|
"control": "J'ai ajouté le contrôle de basculement de thème ci-dessus afin que vous puissiez basculer directement.",
|
|
"choose": "Choisissez Clair (icône de soleil) ou Sombre (icône de lune)",
|
|
"kbd": "Appuyez sur {kbd} sur votre clavier"
|
|
}
|
|
},
|
|
"es": {
|
|
"switch": "Cambiar tema",
|
|
"light": "Claro",
|
|
"dark": "Oscuro",
|
|
"response": {
|
|
"control": "He añadido el control de alternancia de tema arriba para que puedas cambiar directamente.",
|
|
"choose": "Elige Claro (icono de sol) u Oscuro (icono de luna)",
|
|
"kbd": "Presiona {kbd} en tu teclado"
|
|
}
|
|
}
|
|
}
|
|
</i18n>
|
|
|
|
<style scoped>
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
mix-blend-mode: normal;
|
|
}
|
|
::view-transition-old(root) {
|
|
z-index: 1;
|
|
}
|
|
::view-transition-new(root) {
|
|
z-index: 9999;
|
|
}
|
|
.dark::view-transition-old(root) {
|
|
z-index: 9999;
|
|
}
|
|
.dark::view-transition-new(root) {
|
|
z-index: 1;
|
|
}
|
|
</style>
|