En html estas poniendo el header conPor lo que veo, es mejor cambiar la id "main-header"clase con replace, (el cual en css se llamaya que con "#")toggle, y en css lo llamas comono sabes que clase ".mainestas cambiando, y si "bg-header" Solo tienes quesuccess" sigue ahi, sera mas difícil cambiar en css "los estilos.main-header" y poner "#main-header" Este es un ejemplo de lo que puedes hacer
const changeColor= document.querySelector("#main-header");
#mainHeaderconst toggler = document.querySelector(".btn");
toggler.addEventListener("click", function(){
background
changeColor.classList.replace("bg-color:red;success", "mainHeader")
});
o puedes poner esa clase seguida deAqui solo cambie en el selector la clase por la id, ya que cuando la clase se cambie ya tieneno podras utilizarlo de esta maneranuevo, también cambie toggle por replace, ya que manejas mejor que clase quieres cambiar
<header class="bg-success text-white p-4 mb-3 main-header">
Lo probé en mi editor y funciona correctamente