Hice el código para el modo oscuro/claro de esta manera, usando Javascript y CSS. pero no puedo encontrar en ninguna parte una manera de agregar una transición al cambiar los modos claro/oscuro.

CSS

 :root { --primary-bg-color: #F5F5F5; --secondary-bg-color: #FFFF; --primary-text-color: #2B283A; --secondary-text-color: #4A4E74; } .dark-theme { --primary-bg-color: #3A69D2; --secondary-bg-color: #1F2937; --primary-text-color: #FFFF; --secondary-text-color: #F5F5F5; }

JS

 icon.onclick = function() { document.body.classList.toggle("dark-theme") if(document.body.classList.contains("dark-theme")){ icon.src = "sun.png" }else { icon.src = "moon.png" } }