<style>
/* Estilos para o seletor de cores */
.color-picker-label {
display: block;
margin-bottom: 5px;
}
.color-picker-input {
width: 80px;
height: 30px;
border: none;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
}
</style>
<label class="color-picker-label" for="header-color-picker">Header Background Color:</label>
<input class="color-picker-input" type="color" id="header-color-picker" value="#333" onchange="document.documentElement.style.setProperty('--header-bg-color', this.value)">
<label class="color-picker-label" for="footer-color-picker">Footer Background Color:</label>
<input class="color-picker-input" type="color" id="footer-color-picker" value="#f0f0f0" onchange="document.documentElement.style.setProperty('--footer-bg-color', this.value)">