When you click the home button and then you remove the class of bg1 one from the body element you would need to add a new class to the body element so that you can change the svg.
theBody.classList.add("newButtonColor");
e.g.
function showBody() {
const theBody = document.querySelector("body");
theBody.classList.remove("bg1");
theBody.classList.add("newButtonColor");
}
Then in the CSS you use that class to change the button color.
Of course your next question will be that you don’t want all 3 buttons to change color at the same time so instead you would need to remember which button was clicked and then use a class for that button only. You would then eventually end up with three extra classes on the body for the css to use.
Css should take care of the colors not JS. You should be able to control the look of your design from css and not have to go onto the css and the js to change something.
If you used a css class then you can control it from the css and change the color to whatever you want.
function hideAll(elements) {
function resetBackground(backgroundSelector) {
function resetPage() {
function addPlayed(playedButton) {
function showCovers(playButton) {
function coverClickHandler(evt) {
function hideAll(elements) {
function addPlayed(playedButton) {
function resetBackground(backgroundSelector) {
function resetPage() {
function showCovers(playButton) {
function coverClickHandler(evt) {
function hideAll(elements) {
elements.forEach(hide);
}
function addPlayed(playedButton) {
playedButton.classList.add("played");
}
function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);
function hideBackground(background) {
background.classList.add("bg1");
}
allBackgrounds.forEach(hideBackground);
}
function resetPage() {
resetBackground("body");
}
function showCovers(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
show(cover);
}
function coverClickHandler(evt) {
hideAll(config.containers);
addPlayed(evt.currentTarget);
resetPage();
const cover = evt.currentTarget;
showCovers(cover);
}