光/暗模式转换

Question

我用Javascript和CSS编写了暗/光模式的代码。但我在任何地方都找不到改变光/暗模式的过渡方式。

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"
    }
}

Answer 1

尝试按其id获取元素，然后设置其图像源。

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";
    }
}

示例：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src2