theme.vue
1.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<script setup lang="ts">
import type { Component } from 'vue';
import type { ThemeModeType } from '@vben/types';
import { MoonStar, Sun, SunMoon } from '@vben/icons';
import { $t } from '@vben/locales';
import SwitchItem from '../switch-item.vue';
defineOptions({
name: 'PreferenceTheme',
});
const modelValue = defineModel<string>({ default: 'auto' });
const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
{
icon: Sun,
name: 'light',
},
{
icon: MoonStar,
name: 'dark',
},
{
icon: SunMoon,
name: 'auto',
},
];
function activeClass(theme: string): string[] {
return theme === modelValue.value ? ['outline-box-active'] : [];
}
function nameView(name: string) {
switch (name) {
case 'auto': {
return $t('preferences.followSystem');
}
case 'dark': {
return $t('preferences.theme.dark');
}
case 'light': {
return $t('preferences.theme.light');
}
}
}
</script>
<template>
<div class="flex w-full flex-wrap justify-between">
<template v-for="theme in THEME_PRESET" :key="theme.name">
<div
class="flex cursor-pointer flex-col"
@click="modelValue = theme.name"
>
<div
:class="activeClass(theme.name)"
class="outline-box flex-center py-4"
>
<component :is="theme.icon" class="mx-9 size-5" />
</div>
<div class="text-muted-foreground mt-2 text-center text-xs">
{{ nameView(theme.name) }}
</div>
</div>
</template>
<SwitchItem
v-model="themeSemiDarkSidebar"
:disabled="modelValue === 'dark'"
class="mt-6"
>
{{ $t('preferences.theme.darkSidebar') }}
</SwitchItem>
<SwitchItem v-model="themeSemiDarkHeader" :disabled="modelValue === 'dark'">
{{ $t('preferences.theme.darkHeader') }}
</SwitchItem>
</div>
</template>