JSFiddle - React, Tailwind, and code Playground

by David Simpson

HTML

<p>
A paragraph
</p>

<button>
A button
</button>

<button data-font="serif" data-bg="#111" data-fg="#eee">
dark on light serif
</button>


<button data-font="serif" data-bg="#eee" data-fg="#111">
light on light serif
</button>


<button data-font="serif" data-bg="#000" data-fg="hotpink">
bright on light serif
</button>


<button data-font="sans-serif" data-bg="#111" data-fg="#eee">
dark on light sans-serif
</button>


<button data-font="sans-serif" data-bg="#eee" data-fg="#111">
light on light sans-serif
</button>


<button data-font="sans-serif" data-bg="#000" data-fg="hotpink">
bright on light sans-serif
</button>

CSS

:root {
        --theme-font: serif;
        --theme-bg: #fff;
        --theme-fg: #000;
      }

      body {
        background-color: var(--theme-bg);
        color: var(--theme-fg);
        font-family: var(--theme-font);
        
        font-size: 20px;
        line-height: 200%;
      }

      button {
        border: 0;
        border-radius: 4px;
        padding: 10px 20px;

        color: var(--theme-bg);
        background-color: var(--theme-fg);
      }

JavaScript

const buttons = document.querySelectorAll("button");

      buttons.forEach((currentValue, currentIndex, button) => {
        buttons[currentIndex].addEventListener("click", function (event) {
          console.log("click", event);

          document.documentElement.style.setProperty(
            "--theme-font",
            event.target.getAttribute("data-font")
          );
          document.documentElement.style.setProperty(
            "--theme-bg",
            event.target.getAttribute("data-bg")
          );
          document.documentElement.style.setProperty(
            "--theme-fg",
            event.target.getAttribute("data-fg")
          );
        });
      });