主题样式按钮优化

src/App.vue

@@ -58,6 +58,12 @@ function toggleTheme(event: MouseEvent) {
     return
   }
 
+  const willBeDark = !isDark.value
+
+  if (willBeDark) {
+    document.documentElement.classList.add('theme-transition-reverse')
+  }
+
   const x = event.clientX
   const y = event.clientY
   const endRadius = Math.hypot(
@@ -66,7 +72,7 @@ function toggleTheme(event: MouseEvent) {
   )
 
   const transition = document.startViewTransition(async () => {
-    isDark.value = !isDark.value
+    isDark.value = willBeDark
     localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
     updateTheme()
     await nextTick()
@@ -77,17 +83,25 @@ function toggleTheme(event: MouseEvent) {
       `circle(0px at ${x}px ${y}px)`,
       `circle(${endRadius}px at ${x}px ${y}px)`
     ]
+
+    const isReverse = willBeDark
+    
     document.documentElement.animate(
       {
-        clipPath: clipPath,
+        clipPath: isReverse ? [...clipPath].reverse() : clipPath,
       },
       {
         duration: 400,
         easing: 'ease-out',
-        pseudoElement: '::view-transition-new(root)',
+        pseudoElement: isReverse ? '::view-transition-old(root)' : '::view-transition-new(root)',
+        fill: 'forwards',
       }
     )
   })
+
+  transition.finished.then(() => {
+    document.documentElement.classList.remove('theme-transition-reverse')
+  })
 }
 
 function updateTheme() {
@@ -192,7 +206,6 @@ const bgModeLabel = computed(() => {
 </template>
 
 <style>
-/* View Transitions API styles */
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation: none;
@@ -206,6 +219,13 @@ const bgModeLabel = computed(() => {
   z-index: 9999;
 }
 
+.theme-transition-reverse::view-transition-old(root) {
+  z-index: 9999;
+}
+.theme-transition-reverse::view-transition-new(root) {
+  z-index: 1;
+}
+
 :root {
   /* 亮色主题 */
   --color-bg-primary: #ffffff;

src/components/icons/IconTheme.vue

@@ -6,6 +6,8 @@ defineProps<{
 
 <template>
   <div class="icon-theme-container">
+    <div class="moon-glow" :class="{ 'is-active': isDark }"></div>
+
     <svg 
       class="icon-sun"
       :class="{ 'is-hidden': isDark }"
@@ -40,6 +42,10 @@ defineProps<{
       stroke-linejoin="round"
     >
       <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      <g class="stars" stroke="none" stroke-width="0" fill="currentColor">
+        <path class="star star-1" d="M17 8 L17.5 9.5 L19 10 L17.5 10.5 L17 12 L16.5 10.5 L15 10 L16.5 9.5 Z" />
+        <path class="star star-2" d="M13 3.5 L13.3 4.5 L14.3 4.8 L13.3 5.1 L13 6.1 L12.7 5.1 L11.7 4.8 L12.7 4.5 Z" />
+      </g>
     </svg>
   </div>
 </template>
@@ -54,11 +60,32 @@ defineProps<{
   justify-content: center;
 }
 
+.moon-glow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.5);
+  width: 200%;
+  height: 200%;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+  opacity: 0;
+  transition: all 0.4s ease;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.icon-theme-container:hover .moon-glow.is-active {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
 svg {
   position: absolute;
   width: 100%;
   height: 100%;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
 }
 
 .icon-sun {
@@ -81,13 +108,32 @@ svg {
   transform: rotate(0) scale(1);
 }
 
+/* Star styles */
+.star {
+  transform-origin: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.icon-moon.is-visible .star {
+  opacity: 1;
+}
+
 /* Hover effects */
 .icon-theme-container:hover .icon-sun:not(.is-hidden) {
   animation: spin 4s linear infinite;
 }
 
 .icon-theme-container:hover .icon-moon.is-visible {
-  animation: swing 2s ease-in-out infinite;
+  animation: swing 2.5s ease-in-out infinite;
+}
+
+.icon-theme-container:hover .star-1 {
+  animation: twinkle 1.5s infinite ease-in-out;
+}
+
+.icon-theme-container:hover .star-2 {
+  animation: twinkle 2s infinite ease-in-out 0.2s;
 }
 
 @keyframes spin {
@@ -97,6 +143,11 @@ svg {
 
 @keyframes swing {
   0%, 100% { transform: rotate(0) scale(1); }
-  50% { transform: rotate(-15deg) scale(1.1); }
+  50% { transform: rotate(-10deg) scale(1.05); }
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.5; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1.2); }
 }
 </style>