Files
soybean-admin/src/layouts/modules/theme-drawer/modules/dark-mode.vue
2024-07-28 23:00:22 +08:00

77 lines
2.2 KiB
Vue

<script setup lang="ts">
import { computed } from 'vue';
import { themeSchemaRecord } from '@/constants/app';
import { useThemeStore } from '@/store/modules/theme';
import { $t } from '@/locales';
import SettingItem from '../components/setting-item.vue';
defineOptions({
name: 'DarkMode'
});
const themeStore = useThemeStore();
const icons: Record<UnionKey.ThemeScheme, string> = {
light: 'material-symbols:sunny',
dark: 'material-symbols:nightlight-rounded',
auto: 'material-symbols:hdr-auto'
};
function handleSegmentChange(value: string | number) {
themeStore.setThemeScheme(value as UnionKey.ThemeScheme);
}
function handleGrayscaleChange(value: boolean) {
themeStore.setGrayscale(value);
}
function handleColourWeaknessChange(value: boolean) {
themeStore.setColourWeakness(value);
}
const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical'));
</script>
<template>
<NDivider>{{ $t('theme.themeSchema.title') }}</NDivider>
<div class="flex-col-stretch gap-16px">
<div class="i-flex-center">
<NTabs
:key="themeStore.themeScheme"
type="segment"
size="small"
class="relative w-214px"
:value="themeStore.themeScheme"
@update:value="handleSegmentChange"
>
<NTab v-for="(_, key) in themeSchemaRecord" :key="key" :name="key">
<SvgIcon :icon="icons[key]" class="h-23px text-icon-small" />
</NTab>
</NTabs>
</div>
<Transition name="sider-inverted">
<SettingItem v-if="showSiderInverted" :label="$t('theme.sider.inverted')">
<NSwitch v-model:value="themeStore.sider.inverted" />
</SettingItem>
</Transition>
<SettingItem :label="$t('theme.grayscale')">
<NSwitch :value="themeStore.grayscale" @update:value="handleGrayscaleChange" />
</SettingItem>
<SettingItem :label="$t('theme.colourWeakness')">
<NSwitch :value="themeStore.colourWeakness" @update:value="handleColourWeaknessChange" />
</SettingItem>
</div>
</template>
<style scoped>
.sider-inverted-enter-active,
.sider-inverted-leave-active {
--uno: h-22px transition-all-300;
}
.sider-inverted-enter-from,
.sider-inverted-leave-to {
--uno: translate-x-20px opacity-0 h-0;
}
</style>