如何使用document.documentElement.style.setProperty设置多样式？明暗主题文本颜色无法修改

你的代码问题出在JS部分：设置--text-color变量时没有正确调用setProperty方法，只是写了一个无意义的括号表达式，导致文本颜色的变量根本没被赋值。

原代码问题点 #

看你的JS代码，比如深色主题点击事件里：

document.documentElement.style.setProperty
('--background', '#181818');
('--text-color', 'white')

第二行的('--text-color', 'white')只是一个孤立的表达式，没有通过setProperty执行，所以--text-color变量始终是CSS里的默认值，不会随主题切换变化。

修正后的完整代码 #

CSS（无需修改，原代码正常）

body {
    color: var(--text-color, white);
    background-color: var(--background, #181818);
    margin: 0;
    padding: 0;
}

JS（修复setProperty调用）

// 深色主题切换
document.getElementById('dark_theme').addEventListener('click', () => {
    document.documentElement.style.setProperty('--background', '#181818');
    document.documentElement.style.setProperty('--text-color', 'white');
});

// 浅色主题切换
document.getElementById('light_theme').addEventListener('click', () => {
    document.documentElement.style.setProperty('--background', 'white');
    document.documentElement.style.setProperty('--text-color', 'black');
});

补充说明 #

• 确保你的HTML里存在id为dark_theme和light_theme的元素（比如按钮），否则事件绑定会失效。
• 如果想让主题切换更简洁，可以考虑用类切换的方式：把主题变量写在不同的根类里，JS只需要给根元素切换类名，维护起来更方便。

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