static/app/theme-switcher.js

/**
 * 主题切换模块
 * 支持亮色/暗黑主题切换，并保存用户偏好到 localStorage
 */

// 主题常量
const THEME_KEY = 'theme';
const THEME_LIGHT = 'light';
const THEME_DARK = 'dark';

/**
 * 获取当前主题
 * @returns {string} 当前主题 ('light' 或 'dark')
 */
export function getCurrentTheme() {
    // 优先从 localStorage 获取
    const savedTheme = localStorage.getItem(THEME_KEY);
    if (savedTheme) {
        return savedTheme;
    }
    
    // 检查系统偏好
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        return THEME_DARK;
    }
    
    return THEME_LIGHT;
}

/**
 * 设置主题
 * @param {string} theme - 主题名称 ('light' 或 'dark')
 */
export function setTheme(theme) {
    const root = document.documentElement;
    
    if (theme === THEME_DARK) {
        root.setAttribute('data-theme', THEME_DARK);
    } else {
        root.removeAttribute('data-theme');
    }
    
    // 保存到 localStorage
    localStorage.setItem(THEME_KEY, theme);
    
    // 更新 meta theme-color
    updateMetaThemeColor(theme);
    
    // 触发自定义事件
    window.dispatchEvent(new CustomEvent('themechange', { detail: { theme } }));
}

/**
 * 切换主题
 * @returns {string} 切换后的主题
 */
export function toggleTheme() {
    const currentTheme = getCurrentTheme();
    const newTheme = currentTheme === THEME_DARK ? THEME_LIGHT : THEME_DARK;
    setTheme(newTheme);
    return newTheme;
}

/**
 * 更新 meta theme-color
 * @param {string} theme - 主题名称
 */
function updateMetaThemeColor(theme) {
    const metaThemeColor = document.querySelector('meta[name="theme-color"]');
    if (metaThemeColor) {
        // 暗黑主题使用深色，亮色主题使用主色调
        metaThemeColor.setAttribute('content', theme === THEME_DARK ? '#1f2937' : '#059669');
    }
}

/**
 * 初始化主题切换器
 * @param {string} [toggleButtonId='themeToggleBtn'] - 切换按钮的 ID
 */
export function initThemeSwitcher(toggleButtonId = 'themeToggleBtn') {
    // 应用保存的主题或系统偏好
    const savedTheme = getCurrentTheme();
    setTheme(savedTheme);
    
    // 绑定切换按钮事件
    const toggleBtn = document.getElementById(toggleButtonId);
    if (toggleBtn) {
        toggleBtn.addEventListener('click', () => {
            const newTheme = toggleTheme();
            console.log(`主题已切换为: ${newTheme === THEME_DARK ? '暗黑模式' : '亮色模式'}`);
        });
    }
    
    // 监听系统主题变化
    if (window.matchMedia) {
        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        mediaQuery.addEventListener('change', (e) => {
            // 只有在用户没有手动设置主题时才跟随系统
            const savedTheme = localStorage.getItem(THEME_KEY);
            if (!savedTheme) {
                setTheme(e.matches ? THEME_DARK : THEME_LIGHT);
            }
        });
    }
    
    console.log(`主题切换器已初始化，当前主题: ${savedTheme === THEME_DARK ? '暗黑模式' : '亮色模式'}`);
}

/**
 * 检查当前是否为暗黑主题
 * @returns {boolean}
 */
export function isDarkTheme() {
    return getCurrentTheme() === THEME_DARK;
}

// 导出常量
export { THEME_LIGHT, THEME_DARK };