Как сделать одновременную смену цветов у блоков с разными цветами при нажатии на кнопку с возможностью при повторном клике вернуть цвет?

const header = document.querySelector('.header')
const main = document.querySelector('.main');
const but = document.querySelector('.button')

function changeColor(){
    
    whatColorMain();
    whatColorHeader()
}

function whatColorMain(){

    if(main.style.background == "black"){
        main.style.background = "wheat"
        main.style.color = "black"

    }else{
        main.style.background = "black"
        main.style.color = "white"

    }
}
function whatColorHeader(){

    if(header.style.background == "black"){
        header.style.background = "wheat"
        header.style.color = "black"

    }else{
        header.style.background = "black"
        header.style.color = "white"

    }
}

 

.wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 .header {
  position: relative;
  width: 100%;
  height: 20vh;
  background: wheat;
  text-align: center;
  border-bottom: 2px solid white;
 }
 .main {
  position: relative;
  width: 100%;
  height: 80vh;
  background: wheat;
  text-align: center;
  
 }

<div class="wrapper">
    <div class="header">header</div>
    <div class="main">
      main
      <button type="button" class="button" onclick="changeColor()">button</button>
    </div>
</div>