How to change background color with tag and javascript? [duplicate]

I have a profile page for my webpage and would like for the background color to be changeable.

The method of changing is a <select> tag which then after pressing an update <button> onclick should call my function changeBackground()
This function gets the color chosen by the select tag Id and then changes the background

function changeBackground() {
  var colour = document.getElementById('background');
  if (colour == "dark") {
    document.documentElement.style.setProperty('--main-color', '#0F0F0F');
    document.documentElement.style.setProperty('--nav-color', '#303030');
  } else if (colour == "pink") {
    document.documentElement.style.setProperty('--main-color', '#FFAEC9');
    document.documentElement.style.setProperty('--nav-color', '#FF8AAD');
  } else {
    document.documentElement.style.setProperty('--main-color', '#00A2E8;');
    document.documentElement.style.setProperty('--nav-color', '#008BC7;');
  }
}

html {
  font-family: Bahnschrift;
  background-color: var(--main-color);
}

nav {
  background-color: var(--nav-color);
  padding: 15px;
  text-align: right;
}

<label for="background">Background:</label>
<select name="background" id="background">
  <option value="" selected="selected">Default</option>
  <option value="pink">Pink</option>
  <option value="dark">Dark</option>
</select>
<button type="button" onclick="changeBackground()">Update</button>