使用style.setProperty修改HTML根元素CSS变量后页面样式未更新问题

问题原因 #

你遇到的问题是CSS变量的优先级和作用域规则导致的：
你将所有--ct开头的变量定义在了*通用选择器下，这个规则会给页面所有元素（包括html、body、各类组件标签等）都单独设置了对应的--ct系列变量值。你通过JS修改的只是<html>根节点行内样式上的--ct变量值，但子元素自身被*选择器赋值的--ct变量优先级更高，会直接使用自身的变量值，不会继承根节点的修改，所以会出现根节点变量已变更、但下层元素样式没有同步更新的情况。

解决方案 #

方案1：调整CSS变量定义位置

将--ct系列变量移到:root选择器下定义，子元素会继承根节点的变量值，你通过JS修改根节点变量的逻辑就可以正常生效，修改后的CSS示例：

:root {
    --ctBackground: var(--dtBackground);
    --ctTopBgPattern: var(--dtTopBgPattern);
    --ctCardBg: var(--dtCardBg);
    --ctText1: var(--dtText1);
    --ctText2: var(--dtText2);
    --ctToggle: var(--dtToggle);
}

* {
    // light theme
    --ltBackground: hsl(0, 0%, 100%);
    --ltTopBgPattern: hsl(225, 100%, 98%);
    --ltCardBg: hsl(227, 47%, 96%);
    --ltText1: hsl(228, 12%, 44%);
    --ltText2: hsl(230, 17%, 14%);
    --ltToggle: hsl(230, 22%, 74%);

    // dark theme
    --dtBackground: hsl(230, 17%, 14%);
    --dtTopBgPattern: hsl(232, 19%, 15%);
    --dtCardBg: hsl(228, 28%, 20%);
    --dtText1: hsl(228, 34%, 66%);
    --dtText2: hsl(0, 0%, 100%);
    --dtToggle: var(--dtTopBgPattern);
}

方案2：更简洁的类名切换方案（可选优化）

不需要每次修改6个变量，直接通过切换根节点类名的方式实现主题切换，代码更易维护：

1. 调整CSS定义，直接在根节点根据类名定义--ct变量的对应值：

:root {
    // 浅色主题默认值
    --ctBackground: hsl(0, 0%, 100%);
    --ctTopBgPattern: hsl(225, 100%, 98%);
    --ctCardBg: hsl(227, 47%, 96%);
    --ctText1: hsl(228, 12%, 44%);
    --ctText2: hsl(230, 17%, 14%);
    --ctToggle: hsl(230, 22%, 74%);
}
:root.dark {
    // 深色主题覆盖值
    --ctBackground: hsl(230, 17%, 14%);
    --ctTopBgPattern: hsl(232, 19%, 15%);
    --ctCardBg: hsl(228, 28%, 20%);
    --ctText1: hsl(228, 34%, 66%);
    --ctText2: hsl(0, 0%, 100%);
    --ctToggle: hsl(232, 19%, 15%);
}

2. 修改JS逻辑，直接切换根节点类名即可：

useEffect(() => {
  document.documentElement.classList.toggle('dark', darkMode)
}, [darkMode])

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