multiple themes to choose in css

User picks two colors – background and text. When user press ‘apply’ div changes. But I want the themes to be seperate, like two themes are working at once: one for background, second for text. So there’s 4 themes options and 2 of them must be selected. But only one at the time is applied!
I know this explanation is blurry so please check the example on jsfiddle:
http://jsfiddle.net/7Lysdwzo/2/
try it and then comment the second line in function saveTheme: setTheme(theme2);
. Only one aspect changes every time.

code:

<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"> div </div>
  
</div>

: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)
}
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;

}

Is there a way to use two themes at once, one for one aspect, and the other for other aspect?

>Solution :

You can use classList.add and classList.remove instead of replacing the whole className.

fiddle

const setTheme = theme => document.documentElement.classList.add(theme);

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

function saveTheme() {
  // remove all the themes that the user could have added before
  document.documentElement.classList.remove("light", "dark", "Blue", "Green");
  setTheme(theme1);
  setTheme(theme2);
}