javascript - 设置计算样式（无法在“CSSStyleDeclaration”上执行“setProperty”：这些样式已计算）

Question

对于背景，我正在尝试在我的网站上创建暗模式。我希望用户能够单击翻转网站颜色的按钮。到目前为止，我已经拼凑了这个 javascript 片段

var style = getComputedStyle(document.body);

function darkMode() {
    if (style.getPropertyValue('--text-white') === "rgb(254, 254, 254)") {
        style.setProperty('--text-white', "rgb(43, 42, 42)");
        style.setProperty('--text-black', "rgb(254, 254, 254)");
    } else {
        style.setProperty('--text-white', "rgb(254, 254, 254)");
        style.setProperty('--text-black', "rgb(43, 42, 42)");
    }
}

我的目标是更新 :root 下的 css 文件中的变量

:root {
  --text-white: rgb(254, 254, 254);
  --text-black: rgb(43, 42, 42);
}

style.getPropertyValue能够返回正确的值但是当我尝试运行我得到的其余代码时

（索引）：191 未捕获的 DOMException：无法在“CSSStyleDeclaration”上执行“setProperty”：这些样式是计算出来的，因此“--text-white”属性是只读的。

关于如何继续前进的任何提示？

标签： javascriptcss