修复动画掉帧的问题，增加昼夜切换的过渡动画

themes/Ying/assets/js/modules/utils.js

@@ -9,69 +9,13 @@ window.isMobile = function() {
 
 // Toast Message Helper
 window.showToast = function(text, type) {
-    type = type || 'info'; // default to info
-    if (typeof Qmsg !== 'undefined') {
-        // Map common types to Qmsg methods
-        if (typeof Qmsg[type] === 'function') {
-            Qmsg[type](text);
+    if (window.Toast) {
+        var t = type || 'info';
+        if (typeof window.Toast[t] === 'function') {
+            window.Toast[t](text);
         } else {
-            Qmsg.info(text);
+            window.Toast.info(text);
         }
-    } else {
-        // Fallback custom toast
-        let toast = document.querySelector('.custom-toast');
-        if (!toast) {
-            toast = document.createElement('div');
-            toast.className = 'custom-toast';
-            toast.style.cssText = `
-                position: fixed;
-                top: 20px;
-                left: 50%;
-                transform: translateX(-50%);
-                background: rgba(0,0,0,0.8);
-                color: white;
-                padding: 8px 16px;
-                border-radius: 4px;
-                z-index: 9999;
-                font-size: 14px;
-                opacity: 0;
-                transition: opacity 0.3s, background-color 0.3s;
-                pointer-events: none;
-                display: flex;
-                align-items: center;
-                gap: 8px;
-            `;
-            
-            // Add dark mode support class
-            toast.setAttribute('data-toast', 'true');
-            document.body.appendChild(toast);
-        }
-        
-        // Update toast style based on theme
-        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-        if (isDark) {
-            toast.style.background = 'rgba(255, 255, 255, 0.9)';
-            toast.style.color = '#333';
-            toast.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)';
-        } else {
-            toast.style.background = 'rgba(0,0,0,0.8)';
-            toast.style.color = 'white';
-            toast.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
-        }
-        
-        // Simple icon mapping for fallback
-        let icon = '';
-        if (type === 'success') icon = '✅ ';
-        else if (type === 'error') icon = '❌ ';
-        else if (type === 'warning') icon = '⚠️ ';
-        
-        toast.innerText = icon + text;
-        toast.style.opacity = '1';
-        
-        if (window.toastTimeout) clearTimeout(window.toastTimeout);
-        window.toastTimeout = setTimeout(() => {
-            toast.style.opacity = '0';
-        }, 2500);
     }
 };
 
@@ -85,25 +29,30 @@ window.initThemeToggle = function() {
     avatar.parentNode.replaceChild(newAvatar, avatar);
     
     newAvatar.addEventListener('click', function(e) {
-        // Prevent if clicking on something interactive inside (unlikely for avatar)
         e.preventDefault();
-        
-        const html = document.documentElement;
-        const currentTheme = html.getAttribute('data-theme');
-        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-        
-        html.setAttribute('data-theme', newTheme);
-        localStorage.setItem('theme', newTheme);
-        
-        window.showToast('已切换至 ' + (newTheme === 'dark' ? '深色' : '浅色') + '模式', 'success');
 
-        // Sync Artalk Theme
-        if (window.artalk && typeof window.artalk.setDarkMode === 'function') {
-            window.artalk.setDarkMode(newTheme === 'dark');
+        var html = document.documentElement;
+        var currentTheme = html.getAttribute('data-theme');
+        var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        var apply = function() {
+            html.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+
+            window.showToast('已切换至 ' + (newTheme === 'dark' ? '深色' : '浅色') + '模式', 'success');
+
+            if (window.artalk && typeof window.artalk.setDarkMode === 'function') {
+                window.artalk.setDarkMode(newTheme === 'dark');
+            }
+
+            window.dispatchEvent(new Event('resize'));
+        };
+
+        if (document.startViewTransition) {
+            document.startViewTransition(function() { apply(); });
+        } else {
+            apply();
         }
-        
-        // Trigger generic resize event to force charts/etc to redraw if needed
-        window.dispatchEvent(new Event('resize'));
     });
 };