JSFiddle - React, Tailwind, and code Playground

HTML

<div class="theme-light">
  <div class="background-theme">
    <h2 class="color-lime">Ezekiel 25:17</h2>
    <p class="color-theme">The path of the righteous man is beset on all sides by the inequities of the selfish and the tyranny of evil men...</p>
  </div>
</div>
<div class="theme-dark">
  <div class="background-theme">
    <h2 class="color-lime">Ezekiel 25:17</h2>
    <p class="color-theme">The path of the righteous man is beset on all sides by the inequities of the selfish and the tyranny of evil men...</p>
  </div>
</div>

CSS

:root {
  --green: #42f49b;
  --off-white: #ebefe8;
  --dark-grey: #494a4f;
}

.theme-dark {
  --background: var(--dark-grey);
  --text: var(--off-white);
}

.theme-light {
  --background: var(--off-white);
  --text: var(--dark-grey);
}

.color-lime {
  color: var(--green);
}

.color-theme {
  color: var(--text);
}

.background-theme {
  background: var(--background);
}