Puedes agregar una transición a todas las propiedades, de un elemento y sus hijos de esta manera:
.transicion, .transicion *{
transition: all 1.4s;
}
El problema es que dejamos las transiciones seteadas de esa manera para siempre, lo cual puede entorpecer otros efectos de transición que aplica tu theme
.
Entonces hay que colocar la clase y luego quitarla, para esto vamos a usar setTimeout
con un tiempo ligeramente mayor al asignado en la transición. De esta manera no pisamos la transiciones de los elementos como por ejemplo el hover
DEMO:
Nota: El único cambio en el JS son 2 instrucción en la función cambiarTema
const cambiarTema = function (theme) {
const body= document.querySelector("body");
//agregamos la clase
body.classList.add("transicion");
//quitamos la clase
setTimeout(() => body.classList.remove("transicion"),1500);
body.getAttribute("data-bs-theme") === "light" ?
modoOscuro() : modoClaro();
}
//acá comenté coódigo tuyo, solo porque en esta demo no están los elementos a que se hacen mención
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"
}
.transicion, .transicion *{
transition: all 1.4s;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<body data-bs-theme="light">
<div class="p-3 text-body bg-body">
<button class="btn btn-primary" onclick="cambiarTema()">cambiar tema</button>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
<li class="breadcrumb-item active" aria-current="page">Dark</li>
</ol>
</nav>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
<p>This should be shown in a <strong>dark</strong> theme at all times.</p>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="dropdown mb-4">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</body>
js
,html
ycss
entonces agrega eso a la pregunta a partir de ahí te podrán ayudar.