tcs-front-tabler/js/themePoc.js

/**
 * 通用JavaScript函数
 */

// 当文档加载完成后执行
$(document).ready(function() {
    // 初始化主题切换功能
    initThemeToggle();
});

/**
 * 初始化主题切换功能
 */
function initThemeToggle() {
    // 使用事件委托绑定主题切换事件
    // 这样即使元素是动态添加的，事件也能正确触发
    $(document).on("click", "#theme-toggle, #theme-toggle-mobile", function(e) {
        e.preventDefault();
        
        const htmlElement = document.documentElement;
        const currentTheme = htmlElement.getAttribute("data-bs-theme");
        const newTheme = currentTheme === "dark" ? "light" : "dark";
        
        // 设置新主题
        htmlElement.setAttribute("data-bs-theme", newTheme);
        localStorage.setItem("theme", newTheme);
        
        // 更新主题文字
        updateThemeText(newTheme);
    });
}

/**
 * 更新主题文字
 */
function updateThemeText(theme) {
    // 更新桌面端主题文字
    const themeText = document.getElementById("theme-text");
    if (themeText) {
        themeText.textContent = theme === "dark" ? "浅色主题" : "深色主题";
    }
    
    // 更新移动端主题文字
    const themeTextMobile = document.getElementById("theme-text-mobile");
    if (themeTextMobile) {
        themeTextMobile.textContent = theme === "dark" ? "浅色主题" : "深色主题";
    }
}