JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" />
<div class="container"></div>

CSS

:root {
  --container-bg-color: salmon;
}

.container {
  background-color: var(--container-bg-color);
  height: 50px;
  color: #fff;
  padding: 10px;
  transition: all 300ms;
}
.container:before {
  content: "day";
}

[type="checkbox"]:checked + .container {
  --container-bg-color: blueviolet;
}
[type="checkbox"]:checked + .container:before {
  content: "night";
}