multiple toggle of classlist onclick - html

Question

good day everyone this is my first post on this site, i am wondering if it's possible to have multiple classList, and will be toggle each click on the element and loop after the last classList
here's my css:
:root {
--primCol: #fff;
}
.dark-theme{
--primCol: #9A4747;
}
body {
display: inline-flex;
width: 100vw;
height: 100vh;
background-color: var(--primCol);
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
transition: all .5s;
}
#wrapper {
transition: all .7s;
border-radius: 5px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
background-color: var(--primCol);
width: 300px;
height: 300px;
box-shadow: 0 0 10px #B8B8B8;
}
#wrapper:active {
transform: scale(1.3);
}
my jQuery:
$(document).ready(() => {
$('#wrapper').click( () => {
document.body.classList.toggle("dark-theme");
});
});

Answer 1

Try this. Then, use variables from your ::root to give styles to elements.
$('#theme-switcher').click(function() {
document.body.classList.toggle("dark-theme");
});
:root {
--primCol: #fff;
}
::root.dark-theme {
--primCol: #9A4747;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="theme-switcher">Toggle Theme</button>