//html-code
<div class="color" style="background-color:chocolate;" onclick="bgcolor('chocolate')"></div>

//javascript-code
function bgcolor(color){
    document.querySelector('.main-body').style.backgroundColor=color;
    document.querySelector('h1').style.color="white";

}

//javascript-code
const body=document.querySelector('body')
const color=document.querySelectorAll('.color')
color.forEach(function (btn) {    
    btn.addEventListener('click',function (e) {
        if(e.target.id=== "blueviolet"){
        body.style.backgroundColor=e.target.id
        body.style.color="white"
        }
        if (e.target.id==="brown") {
            body.style.backgroundColor=e.target.id
            body.style.color="white";
        }
    })
})