my_one_web/static/js/theme.js

/**
 * 暗黑主题切换功能
 * 小白制作 🐶
 */

(function() {
    'use strict';
    
    const themeKey = 'my_one_web_theme';
    
    // 获取保存的主题
    function getSavedTheme() {
        try {
            return localStorage.getItem(themeKey) || 'light';
        } catch (e) {
            return 'light';
        }
    }
    
    // 保存主题
    function saveTheme(theme) {
        try {
            localStorage.setItem(themeKey, theme);
        } catch (e) {
            // localStorage 不可用时忽略
        }
    }
    
    // 应用主题
    function applyTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        updateToggleButton(theme);
    }
    
    // 更新切换按钮图标
    function updateToggleButton(theme) {
        const btn = document.querySelector('.theme-toggle');
        if (btn) {
            btn.textContent = theme === 'dark' ? '☀️' : '🌙';
            btn.setAttribute('aria-label', theme === 'dark' ? '切换到亮色模式' : '切换到暗黑模式');
        }
    }
    
    // 切换主题（防抖）
    let isToggling = false;
    function toggleTheme(e) {
        // 阻止默认行为和冒泡
        if (e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        // 防抖：300ms 内只响应一次
        if (isToggling) return;
        isToggling = true;
        
        const currentTheme = getSavedTheme();
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        saveTheme(newTheme);
        applyTheme(newTheme);
        
        // 300ms 后重置
        setTimeout(function() {
            isToggling = false;
        }, 300);
    }
    
    // 初始化主题
    function initTheme() {
        const savedTheme = getSavedTheme();
        applyTheme(savedTheme);
        
        // 绑定切换按钮事件
        const btn = document.querySelector('.theme-toggle');
        if (btn) {
            // 点击事件
            btn.addEventListener('click', toggleTheme);
            
            // 触摸事件（移动端）
            btn.addEventListener('touchstart', function(e) {
                e.preventDefault();
            }, { passive: false });
            
            btn.addEventListener('touchend', toggleTheme, { passive: true });
            
            // 键盘支持（无障碍）
            btn.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    toggleTheme(e);
                }
            });
        }
    }
    
    // DOM 加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTheme);
    } else {
        initTheme();
    }
})();