给日夜切换加个弹层提示：jQuery 与 Layer.js 小代码

主题都带日间/夜间切换按钮，但点完之后当前处于哪个模式并没有反馈。这个小提示用 jQuery 加 Layer.js 的弹层补上：切换时轻提示两秒，显示”当前为日间模式”或”当前为夜间模式”。实现很短，不折腾花里胡哨的东西。

第一步：确认 Layer.js 可用

Layer.js 是一个很常见的弹层组件。先判断主题里是否已经调用过：直接跳到第二步贴代码测试，如果弹层出不来，说明没调用，把下面这行放进主题的【自定义头部HTML代码】里：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>

第二步：jQuery 代码

把这段放进主题设置的【自定义javascript代码】就完事了：

// 夜间切换-不能和《主题自适应PC/手机端背景+背景图片切换》一起使用
$(".toggle-theme").click(function() {
    // 延迟几毫米，防止dark-theme类没有反应过来
    var toggleZrYJ = setTimeout(function() {
        var toggleThemeText = "当前为日间模式";
        if ($("body").is('.dark-theme')) {
            toggleThemeText = "当前为夜间模式";
            $("body").css("background-image", "none");
        }
        layer.msg(toggleThemeText, {
            time: 2000,
            anim: 1
        });
    }, 100);
});

逻辑上就三个要点：点击 .toggle-theme 后延时 100 毫秒再读状态，防止 dark-theme 类还没反应过来；判断 body 上有没有 dark-theme 类来决定提示文案，夜间模式下顺手把 background-image 置为 none；最后用 layer.msg 弹 2000 毫秒、anim 为 1 的轻提示。

切换效果

注意事项

这套代码不能和网上那份”主题自适应 PC/手机端背景+背景图片切换”的教程一起用，会出 JS 代码冲突和冗余：那份的 JS 实际是从这里演化出来的，两段都贴等于重复绑定同一个点击事件。别一股脑往主题里堆代码，先弄清两段是不是同一个来源。