JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div id="choose"></div>

  <div class="toggle-container">
    <button onclick="theme1='light';showChosen()" title="Light mode">
     light
    </button>
    <button onclick="theme1='dark';showChosen()" title="Dark mode">
     dark
    </button>
    <br/>
    <button onclick="theme2='Blue';showChosen()" title="Blue">
     Blue
    </button>
    <button onclick="theme2='Green';showChosen()" title="Green">
     Green
    </button>
  </div>
  
  <div class="div1" style="height:100px;width:100px"> first </div>
  
  <div class="div2" style="height:100px;width:100px"> second </div>
  
</div>

CSS

:root,
:root.light {
  --bg-color: #fff;
}
:root.dark {
  --bg-color: #121212;
  
}
button:checked {
  border:1px solid red;
}

:root,
:root.Blue {
  --text-color: blue;
}

:root.Green {
  --text-color: green;
}

.div1,.div2 {
  background-color: var(--bg-color);
  color: var(--text-color)
}

JavaScript

const setTheme = theme => document.documentElement.className = theme;

var theme1="";
var theme2="";

function saveTheme() {
setTheme(theme1);
setTheme(theme2);

}

function showChosen() {
var str = 'background should be: ' + theme1 + ';;; text should be: ' + theme2 + '<button onclick="saveTheme()" title="Green"> apply</button>';
document.getElementById("choose").innerHTML = str;

}