如何通过 CSS 根变量设置简单的配色方案？

Question

我想根据简单的 CSS 根变量设置配色方案。 JavaScript 不起作用：单击其中一个选项时，它不会 see/set 根变量。为了让这个简单的配色方案发挥作用，我忽略了什么？

const setTheme = theme => document.documentElement.className = theme;
document.getElementById('themeoptions').addEventListener('change', function() {
    setTheme(this.value);
});

#themeoptions p{ /* User Interface */
  display: inline-block;
  text-decoration: underline;
}#themeoptions p:hover{cursor: pointer}


:root.light {
  --bgr: #ddc;
  --txt: #456;
}
:root.dark {
  --bgr: #222;
  --txt: #844;
}
:root.blue {
  --bgr: #046;
  --txt: #dde;
}


body {
  background-color: var(--bgr);
  color: var(--txt);
}

<div id="themeoptions">
    <p value="light">Light</p>
    <p value="dark">Dark</p>
    <p value="blue">Blue</p>
</div>

<h1>Click on a theme to change the color scheme!</h1>

Answer 1

您的 JavaScript 代码中有三个问题需要解决：

元素上的 value 属性不引用您在段落元素上命名为 value 的属性。要访问此属性的值，您需要使用 Element.getAttribute().
this 在您的事件侦听器回调函数中没有引用事件的目标元素。要访问目标元素，您需要使用 Event.target.
您要监听的事件很可能是 click event（不是 change 事件）。

const setTheme = theme => document.documentElement.className = theme;
document.getElementById('themeoptions').addEventListener('click', ({target}) => {
  setTheme(target.getAttribute('value'));
});

#themeoptions p{ /* User Interface */
  display: inline-block;
  text-decoration: underline;
}#themeoptions p:hover{cursor: pointer}


:root.light {
  --bgr: #ddc;
  --txt: #456;
}
:root.dark {
  --bgr: #222;
  --txt: #844;
}
:root.blue {
  --bgr: #046;
  --txt: #dde;
}


body {
  background-color: var(--bgr);
  color: var(--txt);
}

<div id="themeoptions">
    <p value="light">Light</p>
    <p value="dark">Dark</p>
    <p value="blue">Blue</p>
</div>

<h1>Click on a theme to change the color scheme!</h1>

如何通过 CSS 根变量设置简单的配色方案？

How to setup a simple color scheme via CSS Root Variables?

html

javascript

css

colors