Mi pregunta radica en si es posible darle una transición con css a un elemento html que ejecuta una funcion js mediante el onclick. Actualmente funciona todo, pero no puedo darle una transicion con css a ese elemento.La funcion se ejecuta instantaneamente y queda bastante feo. Adjunto el js que hice, puede que no sea lo mejor pero son mis inicios. Sepan disculpar!.
const modoOscuro = () => {
document.querySelector("body").setAttribute("data-bs-theme", "dark");
document.querySelector("#id-icon").setAttribute("class", "icon fa-solid fa-sun fa-lg");
document.querySelector("#id-toggle").setAttribute("class", "fa-solid fa-toggle-on fa-xl");
document.getElementById("text-mode").innerHTML = "Modo Claro"
}
const modoClaro = () => {
document.querySelector("body").setAttribute("data-bs-theme", "light");
document.querySelector("#id-icon").setAttribute("class", "icon fa-solid fa-moon fa-lg");
document.querySelector("#id-toggle").setAttribute("class", "fa-solid fa-toggle-off fa-xl");
document.getElementById("text-mode").innerHTML = "Modo Oscuro"
}
const cambiarTema = () => {
document.querySelector("body").getAttribute("data-bs-theme") === "light" ?
modoOscuro() : modoClaro();
}