[英]Transition on light/dark mode
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.我使用 Javascript 和 CSS 以这种方式编写了暗/亮模式的代码。但我无法在任何地方找到在更改亮/暗模式时添加过渡的方法。
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 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尝试通过其 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";
}
}
Example: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src2示例: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.