I did the code for dark/light mode this way, using Javascript and CSS. but I can't find anywhere a way to add a transition on changing the light/dark modes.
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"
}
}
Try getting the element by its id and then set its image source
icon.onclick = function() {
document.body.classList.toggle("dark-theme")
if(document.body.classList.contains("dark-theme")){
document.getElementById("myIcon").src = "sun.png";
}else {
document.getElementById("myIcon").src = "moon.png";
}
}
Example: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src2