JSFiddle - React, Tailwind, and code Playground

by happyjoker

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
  <div class="change-color">
    <p>Hello World</p>
  </div>

  <div class="change-color">
    <p>Hello World 2</p>
  </div>

  <button>Change color</button>
</body>

CSS

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

:root {
  --color-bg: #000;
}

body {
  background-color: var(--color-bg);
}

body.another-color {
  --color-bg: #ddd;
}

JavaScript

// find elements
var anotherColor = $("body")
var button = $("button")

// handle click and add class
button.on("click", function(){
  anotherColor.toggleClass("another-color")
})