如何为深色模式与浅色模式切换时的所有元素添加淡入过渡效果

问题原因 #

你当前的淡入效果不生效核心是2个逻辑错误：

• jQuery的fadeIn()方法仅对display: none的隐藏元素生效，你的页面body默认是可见状态，调用fadeIn()不会触发任何动画，且你把样式修改逻辑放在fadeIn()的回调函数中，会导致1秒后样式直接跳变，没有过渡效果
• 你没有给需要切换的属性加过渡规则，即使修改样式也不会有平滑动画

修复方案 #

第一步：修改CSS，添加过渡规则

给需要切换状态的元素加上过渡属性，即可实现平滑的样式切换：

/* 把下面这段加到你的CSS文件里即可 */
body {
    transition: background-color 1s ease-in-out;
}
p, label, yellow {
    transition: color 1s ease-in-out;
}
input, label {
    transition: background-color 1s ease-in-out;
}

第二步：修改JS的切换逻辑

删掉无用的fadeIn()调用，直接修改样式即可，同时修复hover事件重复绑定的问题（每次切换模式如果重复绑定hover事件，会导致事件叠加触发多次）：

function toggleDisplay() {
    $("displaytog").on("click", () => {
        if (icon.src.includes(night_icon)) {
            icon.src = day_icon;
            $(icon).animate({ right: '25%' });
            // 直接修改样式，CSS会自动做过渡动画
            $("body").css("background-color", "rgb(21,21,21)");
            $("p").css("color", "white");
            $("yellow").css("color", "rgb(255,243,110)");
            $("input").css("background-color", "rgb(21,21,21)");
            $("label").css("background-color", "rgb(21,21,21)");
            $("label").css("color", "white");
            input_hover();
            button_hover()
        } else {
            icon.src = night_icon;
            $(icon).animate({ right: '0%' });
            // 直接修改样式
            $("body").css("background-color", "white");
            $("p").css("color", "black");
            $("yellow").css("color", "black");
            $("input").css("background-color", "white");
            $("label").css("background-color", "white");
            $("label").css("color", "black");
            input_hover();
            button_hover()
        }
    })
}

// 同时修改input_hover和button_hover函数，先解绑之前的hover事件再绑定新的，避免事件叠加
function input_hover() {
    // 先解绑之前的鼠标事件
    $('.border').off('mouseenter mouseleave');
    if (icon.src.includes(night_icon)) {
        $('.border').hover(
            function () {
                $(this).css({ "border": "solid var(--blue) 3px" });
            },
            function () {
                $(this).css({ "border": "solid grey 3px" });
            }
        );
    }else {
        $('.border').hover(
            function () {
                $(this).css({ "border": "solid var(--yellow) 3px" });
            },
            function () {
                $(this).css({ "border": "solid grey 3px" });
            }
        );
    }
}
function button_hover() {
    // 先解绑之前的鼠标事件
    $('button').off('mouseenter mouseleave');
    if (icon.src.includes(night_icon)) {
        $('button').hover(
            function () {
                $(this).css({ "background-color": "var(--blue)" });
                $(this).css({ "animation": "none" });
            },
            function () {
                $(this).css({ "animation": "colours ease-in-out 15s infinite" });
            }
        );
    } else {
        $('button').hover(
            function () {
                $(this).css({ "background-color": "var(--yellow)" });
                $(this).css({ "animation": "none" });
            },
            function () {
                $(this).css({ "animation": "colours ease-in-out 15s infinite" });
            }
        );
    }
}

优化建议 #

你可以直接给body加个dark-mode的类名来控制所有样式，不用每次切换都手动改N个元素的css，代码会简洁很多，后续维护也更方便：

/* 暗黑模式样式统一写在这里 */
body.dark-mode {
    background-color: rgb(21,21,21);
}
body.dark-mode p, body.dark-mode label {
    color: white;
}
body.dark-mode yellow {
    color: rgb(255,243,110);
}
body.dark-mode input, body.dark-mode label {
    background-color: rgb(21,21,21);
}
body.dark-mode .border:hover {
    border-color: var(--blue);
}
body.dark-mode button:hover {
    background-color: var(--blue);
}
/* 日间模式hover样式 */
body .border:hover {
    border-color: var(--yellow);
}
body button:hover {
    background-color: var(--yellow);
}

这样JS的切换逻辑就可以简化成一行切换类名，也不用单独绑定hover事件。

内容的提问来源于stack exchange，提问作者ckwheatley15