JSFiddle - React, Tailwind, and code Playground

HTML

<!--
  https://kz1.pl/19670/html-javascript-zmiana-koloru-tla-na-stronie?show=19767#c19767
-->

<!DOCTYPE html>
<html lang="pl-PL">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <ul id="body-color-chooser">
      <li>
        <input type="radio" id="bg1" name="bg" />
        <label for="bg1" class="green"></label>
      </li>
      <li>
        <input type="radio" id="bg2" name="bg" />
        <label for="bg2" class="red"></label>
      </li>
      <li>
        <input type="radio" id="bg3" name="bg" />
        <label for="bg3" class="yellow"></label>
      </li>
      <li>
        <input type="radio" id="bg4" name="bg" />
        <label for="bg4" class="black"></label>
      </li> 
      <li>
        <input type="radio" id="bg5" name="bg" />
        <label for="bg5" class="orange"></label>
      </li>      
    </ul>

    <p>Lorem ipsum ...</p>

  </body>
</html>

CSS

* {
  box-sizing: border-box;
}
:root {
  --body-color-chooser-box-width: 2em; /* szerokość kafelka <li> */
  --body-color-chooser-box-padding: 0.1em; /* odstęp między kafelkami <li> */
  --body-color-chooser-box-count: 5; /* ile kafelków <li> w <ul> o id = "body-color-chooser" */
  --body-font-color: black;
}
html, 
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: white;
  color: var(--body-font-color, black);
  transition: background-color 0.25s;
}
p {
  margin: 1em;
}
ul#body-color-chooser {
  margin: 1em;
  padding: 0;
  width: calc(var(--body-color-chooser-box-count) * (var(--body-color-chooser-box-width) + (var(--body-color-chooser-box-padding) * var(--body-color-chooser-box-count))));
}
ul#body-color-chooser li {
  display: inline-block;
  list-style-type: none;
  padding: var(--body-color-chooser-box-padding);
  width: var(--body-color-chooser-box-width);
  height: 2em;
}
ul#body-color-chooser input[type="radio"] {
  display: none;
}

ul#body-color-chooser label {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.25s;
}
ul#body-color-chooser label:hover {
  transform: scale(1.1);
}
ul#body-color-chooser input:checked + label {
  box-shadow: 0 0 2px 2px gray;
  border-radius: 50%;
}
.green {
  background-color: green;
}
.red {
  background-color: red;
}
.yellow {
  background-color: yellow;
}
.black {
  background-color: black;
  
  --body-font-color: white;
}
.orange {
  background-color: orange;
}

JavaScript

window.onload = load;

function load() {
  const body_color_chooser = document.querySelector('#body-color-chooser');
  body_color_chooser.onclick = bodyColor;

  function bodyColor(e) {
    if (e.target.nodeName == 'LABEL') {
      document.body.classList.remove(document.body.dataset.currentColor || null);
      document.body.classList.add(e.target.className);
      document.body.dataset.currentColor = e.target.className;
    }
  }       
}