如何让JS明暗主题切换函数作用于body以外的其他元素？

现有问题：

• 主题切换脚本仅对body元素生效，给header等其他元素应用相同逻辑时，刷新页面后主题状态丢失，只有body能跨页面保存主题。
• 原脚本仅在页面加载时给body添加存储的主题类，其他元素未读取本地存储状态；切换主题时也只操作body，未同步其他元素的类状态。

修复方案：

1. 页面初始化时，读取本地存储的主题状态，遍历所有需要切换主题的元素（比如body、header），统一添加对应的类。
2. 切换主题时，同样遍历这些元素，同步切换主题类，本地存储只需要维护一份主题状态即可。

修改后的代码：

(function() {
    // 读取本地存储的主题状态，默认空值（对应深色主题）
    let savedTheme = localStorage.getItem("tema") || "";
    // 选中所有需要切换主题的元素，可根据需求添加更多选择器
    let targetElements = document.querySelectorAll("body, header");
    
    // 遍历元素，添加存储的主题类
    targetElements.forEach(element => {
        element.classList.add(savedTheme);
    });
    
    // 更新主题显示文本
    document.getElementById("tema").textContent = savedTheme || "light";
})();

function promeniTemu() {
    let savedTheme = localStorage.getItem("tema");
    // 选中所有需要切换主题的元素
    let targetElements = document.querySelectorAll("body, header");
    
    // 遍历元素，切换主题类
    targetElements.forEach(element => {
        element.classList.toggle("svetlaTema");
    });
    
    // 更新本地存储的主题状态
    if (savedTheme && savedTheme === "svetlaTema") {
        localStorage.setItem("tema", "");
    } else {
        localStorage.setItem("tema", "svetlaTema");
    }
    
    // 更新主题显示文本
    document.getElementById("tema").textContent = localStorage.getItem("tema") || "light";
}

说明：

• 用document.querySelectorAll批量选中需要切换主题的元素，可根据实际需求扩展选择器（比如给所有需要切换的元素加.theme-target类，用document.querySelectorAll(".theme-target")统一选中）。
• 初始化和切换时都遍历这些元素，保证所有目标元素的主题状态同步。
• 本地存储只维护一份主题状态，避免多份存储导致的不一致问题。

内容的提问来源于stack exchange，提问作者larrythehedgehog