fixed 昼夜切换 bug

themes/Ying/assets/js/main.js

@@ -218,17 +218,47 @@ function copySzhContent() {
     }
 }
 
+// Update Theme Icon
+function updateThemeIcon(isDark) {
+    const toggleBtns = document.querySelectorAll('#theme-toggle');
+    toggleBtns.forEach(btn => {
+        const icon = btn.querySelector('i');
+        if (icon) {
+            // Add rotation class for animation
+            btn.classList.add('rotate');
+            setTimeout(() => btn.classList.remove('rotate'), 500);
+
+            // Switch icon
+            if (isDark) {
+                icon.className = 'ri-moon-line';
+            } else {
+                icon.className = 'ri-sun-line';
+            }
+        }
+    });
+}
+
 // Theme Toggle Logic
 function toggleTheme() {
     const currentTheme = document.documentElement.getAttribute('data-theme');
     const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    const isDark = newTheme === 'dark';
+
     document.documentElement.setAttribute('data-theme', newTheme);
     localStorage.setItem('theme', newTheme);
     
-    // Notify Artalk if present
-    if (window.Artalk) {
-        Artalk.setDarkMode(newTheme === 'dark');
-    }
+    // Update Icon
+    updateThemeIcon(isDark);
+    
+    // Optimize: Defer heavy Artalk update to avoid blocking UI animation
+    setTimeout(() => {
+        // Notify Artalk if present (Instance or Static)
+        if (window.artalk && typeof window.artalk.setDarkMode === 'function') {
+            window.artalk.setDarkMode(isDark);
+        } else if (window.Artalk && typeof Artalk.setDarkMode === 'function') {
+            Artalk.setDarkMode(isDark);
+        }
+    }, 50);
 }
 
 // Listen for system theme changes
@@ -239,7 +269,13 @@ try {
         if (!localStorage.getItem('theme')) {
             const newTheme = e.matches ? 'dark' : 'light';
             document.documentElement.setAttribute('data-theme', newTheme);
-            if (window.Artalk) {
+            
+            updateThemeIcon(newTheme === 'dark');
+
+            // Notify Artalk
+            if (window.artalk && typeof window.artalk.setDarkMode === 'function') {
+                window.artalk.setDarkMode(newTheme === 'dark');
+            } else if (window.Artalk && typeof Artalk.setDarkMode === 'function') {
                 Artalk.setDarkMode(newTheme === 'dark');
             }
         }
@@ -279,6 +315,21 @@ function updateFloatingToolsVisibility() {
 
 // Floating Tools Initialization
 function initFloatingTools() {
+    // Initialize Theme Icon based on current theme
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const isDark = currentTheme === 'dark';
+    const toggleBtns = document.querySelectorAll('#theme-toggle');
+    toggleBtns.forEach(btn => {
+        const icon = btn.querySelector('i');
+        if (icon) {
+             if (isDark) {
+                 icon.className = 'ri-moon-line';
+             } else {
+                 icon.className = 'ri-sun-line';
+             }
+        }
+    });
+
     // Initial visibility check
     updateFloatingToolsVisibility();