Me gustaría establecer el esquema de color basado en variables raíz CSS simples. El JavaScript no funciona: no ve/establece las variables raíz cuando se hace clic en una de las opciones. ¿Qué he pasado por alto para hacer que este esquema de color simple funcione?
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>Hay tres problemas que abordar en su código JavaScript:
La propiedad de value en un elemento no se refiere al atributo que ha denominado value en los elementos de su párrafo. Para acceder al valor de esta propiedad, deberá usar Element.getAttribute() .
this en su función de devolución de llamada del detector de eventos no se refiere al elemento de destino del evento. Para acceder al elemento de destino, deberá usar Event.target .
Lo más probable es que el evento que desea escuchar sea el evento de click (no el evento de 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>