<script setup lang="ts">
|
import type { Component } from 'vue';
|
|
import type { ThemeModeType } from '..\..\..\..\..\..\..\types\src';
|
|
import { watch } from 'vue';
|
|
import { MoonStar, Sun, SunMoon } from '..\..\..\..\..\..\..\icons\src';
|
import { $t } from '..\..\..\..\..\..\..\locales\src';
|
import { usePreferences } from '..\..\..\..\..\..\..\preferences\src';
|
|
import SwitchItem from '../switch-item.vue';
|
|
defineOptions({
|
name: 'PreferenceTheme',
|
});
|
|
const modelValue = defineModel<string>({ default: 'auto' });
|
const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
|
const themeSemiDarkSidebarSub = defineModel<boolean>('themeSemiDarkSidebarSub');
|
const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
|
|
const { layout } = usePreferences();
|
|
watch(
|
() => themeSemiDarkSidebar.value,
|
() => {
|
if (!themeSemiDarkSidebar.value) {
|
themeSemiDarkSidebarSub.value = themeSemiDarkSidebar.value;
|
}
|
},
|
);
|
|
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="mt-2 text-center text-xs text-muted-foreground">
|
{{ nameView(theme.name) }}
|
</div>
|
</div>
|
</template>
|
|
<SwitchItem
|
v-model="themeSemiDarkSidebar"
|
:disabled="
|
modelValue === 'dark' ||
|
layout === 'header-nav' ||
|
layout === 'full-content'
|
"
|
:tip="$t('preferences.theme.darkSidebarTip')"
|
class="mt-6"
|
>
|
{{ $t('preferences.theme.darkSidebar') }}
|
</SwitchItem>
|
<SwitchItem
|
v-model="themeSemiDarkSidebarSub"
|
:disabled="
|
modelValue === 'dark' ||
|
(layout !== 'header-mixed-nav' && layout !== 'sidebar-mixed-nav') ||
|
!themeSemiDarkSidebar
|
"
|
:tip="$t('preferences.theme.darkSidebarSubTip')"
|
>
|
{{ $t('preferences.theme.darkSidebarSub') }}
|
</SwitchItem>
|
<SwitchItem v-model="themeSemiDarkHeader" :disabled="modelValue === 'dark'">
|
{{ $t('preferences.theme.darkHeader') }}
|
</SwitchItem>
|
</div>
|
</template>
|
