admin/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue

<script setup lang="ts">
import type { ThemeModeType } from '@vben/types';

import type { Component } from 'vue';

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 themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu', {
  default: true,
});

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 'light': {
      return $t('preferences.theme.light');
    }
    case 'dark': {
      return $t('preferences.theme.dark');
    }
    case 'auto': {
      return $t('preferences.followSystem');
    }
  }
}
</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="themeSemiDarkMenu"
      :disabled="modelValue === 'dark'"
      class="mt-6"
    >
      {{ $t('preferences.theme.darkMenu') }}
    </SwitchItem>
  </div>
</template>