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!.

    

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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();
    }

<!-- end snippet -->