Instead of switching to a theme one by one it ends up on the 'solar' theme and doesn't change. What's the problem?

This is the code -

const bodyClassList = document.body.classList;
const bodyClass = document.body.className;
const themes = ["light", "solar", "dark"];

themeBtn.addEventListener('click', () => {
   themes.forEach(theme => {
      bodyClassList.replace(bodyClass, theme);  
   })
   
   theme = document.body.className;
   console.log(theme);
})

Instead of switching to a theme one by one it ends up on the 'solar' theme and doesn't change. What's the problem?