I created two color picker to change table colors in html using input, but i don't know how to change those colors based off what user picks in color picker. I really, really don't want to use jquery and i prefer it to be really simple. Also if it's needed you can find that site under: <www.kubera.cba.pl>
You can use a css variable and change the variable with JavaScript when the color is selected.
const root = document.querySelector(':root');
function setColor (property, value) {
root.style.setProperty(property, value);
}
document.querySelectorAll("[data-row]").forEach( function(elem) {
elem.addEventListener("input", function(){
setColor(elem.dataset.row, elem.value);
});
});:root {
--odd: #CCCC33;
--even: #EE33CC;
}
tr:nth-child(even) {
background-color: var(--even);
}
tr:nth-child(odd) {
background-color: var(--odd);
}<table>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
</tbody>
</table>
<label for="odd"><input type="color" id="odd" data-row="--odd" value="#CCCC33"/>
<label for="even"><input type="color" id="even" data-row="--even" value="#EE33CC" />On your input color, put a change event where you can get the new color with "this.value". Now apply the value to the element.
<input onchange="document.getElementById('yourTable').style.backgroundColor = this.value" type='color'/>