Entonces, estaba tratando de obtener la entrada del usuario y ponerla como variable CSS para todo el sitio, pero solo me proporciona el valor predeterminado (del selector de color). Busqué en muchos foros errores relacionados con JS y HTML, pero no tuve suerte. También sería una gran suerte si no tuviera que convertirlos en un formulario debido al diseño de mi HTML ya configurado.
var changeclrbtn = document.getElementById('main-colorbtn'); var maincolore = document.getElementById('main-colorbox').value changeclrbtn.onclick = function() {maincolorset()}; function maincolorset() { document.documentElement.style.setProperty('--main-color', maincolore ); } :root { --main-color: #499ae8; } <div>Color Theme</div> <div> <input type="color" id="main-colorbox" name="maincolorbox" value="#499ae8"> <input type="button" value="Change Color" id="main-colorbtn" onclick="maincolorset()"> </div>Solo necesitas mover esta línea:
var maincolore = document.getElementById('main-colorbox').valuedentro de su función.
Ahora solo configura la variable maincolore en la primera carga de página, no cuando hace clic en el botón.
var changeclrbtn = document.getElementById('main-colorbtn'); changeclrbtn.onclick = function() {maincolorset()}; function maincolorset() { var maincolore = document.getElementById('main-colorbox').value; document.documentElement.style.setProperty('--main-color', maincolore ); } :root { --main-color: #499ae8; } body { background: var(--main-color); } <div>Color Theme</div> <div> <input type="color" id="main-colorbox" name="maincolorbox" value="#499ae8"> <input type="button" value="Change Color" id="main-colorbtn" onclick="maincolorset()"> </div>