perf: reorganize the icons and reduce the volume

packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue

@@ -34,7 +34,7 @@ const bindProps = computed(() => {
     : {
         class: 'rounded-full',
         size: 'icon' as const,
-        style: { padding: '6px' },
+        style: { padding: '7px' },
         variant: 'icon' as const,
       };
 });
@@ -130,18 +130,18 @@ function toggleTheme(event: MouseEvent) {
   }
 
   &__sun {
-    @apply fill-foreground/80 stroke-none;
+    @apply fill-foreground/70 stroke-none;
 
     transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
     transform-origin: center center;
 
     &:hover > svg > & {
-      @apply fill-foreground/80;
+      @apply fill-foreground/70;
     }
   }
 
   &__sun-beams {
-    @apply stroke-foreground/80 stroke-[2px];
+    @apply stroke-foreground/70 stroke-[2px];
 
     transition:
       transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),

packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue

@@ -1,11 +1,7 @@
 <script lang="ts" setup>
 import type { ThemeModeType } from '@vben-core/typings';
 
-import {
-  IcRoundMotionPhotosAuto,
-  IcRoundWbSunny,
-  MdiMoonAndStars,
-} from '@vben-core/icons';
+import { MoonStar, Sun, SunMoon } from '@vben-core/icons';
 import { $t } from '@vben-core/locales';
 import {
   preferences,
@@ -38,17 +34,17 @@ const { isDark } = usePreferences();
 
 const PRESETS = [
   {
-    icon: IcRoundWbSunny,
+    icon: Sun,
     name: 'light',
     title: $t('preferences.theme.light'),
   },
   {
-    icon: MdiMoonAndStars,
+    icon: MoonStar,
     name: 'dark',
     title: $t('preferences.theme.dark'),
   },
   {
-    icon: IcRoundMotionPhotosAuto,
+    icon: SunMoon,
     name: 'auto',
     title: $t('preferences.followSystem'),
   },