使用CSS var动态切换样式遇阻：暗黑模式无法生效问题排查

问题出在哪？ #

你写的CSS选择器.dark :root逻辑有误：:root对应的是<html>标签，它是<body>的父元素，所以这个选择器是在找带有dark类的元素内部的:root元素——这在DOM结构里根本不存在，因此变量覆盖规则永远不会触发，样式自然不会切换。

你的JS是给<body>添加/移除dark类，但CSS里没有对应这个场景的变量覆盖规则，导致样式无变化。

修正方案 #

方案1：调整CSS选择器，适配body的dark类 #

直接修改CSS，针对body.dark的场景重新定义变量：

:root {
    --bg-color: #862e2e;
    --text-color: #ffffff;
}

/* 当body拥有dark类时，覆盖全局变量 */
body.dark {
  --bg-color: #2d3748;
  --text-color: #e2e8f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

JS代码保持不变即可，此时body添加dark类后，自身的变量定义会覆盖:root的全局变量，样式随之切换。

方案2：将dark类加到html元素（更推荐） #

把类加到<html>元素上（对应:root），这样全局变量的更新更合理：

修改后的JS：

const toggleDarkModeBtn = document.getElementById('toggle-dark-mode');

toggleDarkModeBtn.addEventListener('click', () => {
    // 给html元素切换dark类
    document.documentElement.classList.toggle('dark');
    
    toggleDarkModeBtn.textContent = document.documentElement.classList.contains('dark') 
        ? 'Disable Dark Mode' 
        : 'Enable Dark Mode';
});

对应的CSS：

:root {
    --bg-color: #862e2e;
    --text-color: #ffffff;
}

/* 当html拥有dark类时，直接覆盖全局变量 */
:root.dark {
  --bg-color: #2d3748;
  --text-color: #e2e8f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

正确使用CSS变量动态修改样式的要点 #

• 作用域匹配：全局变量定义在:root（即<html>），局部变量定义在目标元素上，切换样式时要确保选择器能匹配到对应作用域的元素。
• 两种更新方式：
  1. 通过JS操作元素的class，配合CSS选择器覆盖变量（适合多变量批量切换）。
  2. 直接用JS修改元素的style属性：document.documentElement.style.setProperty('--bg-color', '#2d3748')，适合单个变量的动态修改。

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