<div class="container">
  <input type="radio" id="red" name="theme" checked>
  <label for="red">Red</label>
  <input type="radio" id="green" name="theme">
  <label for="green">Green</label>
  <input type="radio" id="blue" name="theme">
  <label for="blue">Blue</label>

  <article>
    <header>
      <h1>Chinese typewriter</h1>
    </header>
    <p>A Chinese typewriter is a typewriter that can type Chinese script. Early European typewriters began appearing in the early 19th century. However, as the Chinese language uses a logographic writing system, fitting thousands of Chinese characters on the machine needed much more complex engineering than typewriters using a simple latin alphabet, or other non-logographic scripts. An ordinary Chinese printing office uses 6,000 Chinese characters.</p>
  </article>
</div>

body {
  background-color: #ffffff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

#red:checked ~ article {
  --header-bg: #EF476F;
  --article-bg: #FFF2F6;
}

#green:checked ~ article {
  --header-bg: #06D6A0;
  --article-bg: #E4FFF8;
}

#blue:checked ~ article {
  --header-bg: #118AB2;
  --article-bg: #DBF6FF;
}

header {
  background-color: var(--header-bg, #EF476F);
  color: var(--header-txt, #fff);
  padding: 0.5em;
  margin-top: 1em;
}

article {
  background-color: var(--article-bg, #FFF2F6);
}

h1 {
  margin: 0 0.25em;
}

p {
  padding: 0 1em 1em;
}