如何将论坛手动明暗模式切换脚本改为定时自动切换（晚6点至早7点）

你可以通过新增时间判断逻辑，结合原有模式切换代码，实现按时段自动切换的功能。改造后的脚本会在页面加载时自动根据当前时间设置模式，同时保留原有的手动切换功能。

改造后的完整代码 #

<script>
    $(document).ready(function() {
        // 判断当前是否处于深色模式时段（18:00-次日7:00）
        function shouldUseDarkMode() {
            const currentHour = new Date().getHours();
            // 晚6点到午夜，或午夜到早7点
            return currentHour >= 18 || currentHour < 7;
        }

        // 初始化自动切换模式
        function initAutoMode() {
            $('html').removeClass('darkMode lightMode');
            ips.utils.cookie.unset('darkMode');
            ips.utils.cookie.unset('lightMode');
            
            if (shouldUseDarkMode()) {
                $('html').addClass('darkMode');
                ips.utils.cookie.set('darkMode', true, true);
            } else {
                $('html').addClass('lightMode');
                ips.utils.cookie.set('lightMode', true, true);
            }
        }

        // 页面加载时自动执行模式设置
        initAutoMode();

        // 保留原有的手动切换功能
        $('.color-mode__btn').on('click', function (event) {
            $('html').removeClass('darkMode lightMode');
            ips.utils.cookie.unset('darkMode');
            ips.utils.cookie.unset('lightMode');
            if ($(this).hasClass('light--hidden')) {
                $('html').addClass('lightMode');
                ips.utils.cookie.set('lightMode', true, true);
            } else {
                $('html').addClass('darkMode');
                ips.utils.cookie.set('darkMode', true, true);
            }
        });
    });
</script>

关键逻辑说明 #

• 时间判断函数：shouldUseDarkMode通过new Date().getHours()获取当前小时数，判断是否处于18点到次日7点的区间，返回布尔值。
• 自动初始化：页面加载完成后调用initAutoMode，根据时间判断结果直接设置对应的模式和cookie，覆盖原有的初始化逻辑。
• 保留手动切换：原有的按钮点击事件逻辑完全保留，用户仍可手动切换模式，手动操作会覆盖自动设置的模式（直到页面重新加载，自动逻辑会再次生效）。

如果希望手动切换后，后续页面加载时优先使用用户手动设置的模式，可以修改initAutoMode逻辑：

function initAutoMode() {
    // 先检查是否有用户手动设置的cookie，有则优先使用
    const hasDarkCookie = ips.utils.cookie.get('darkMode');
    const hasLightCookie = ips.utils.cookie.get('lightMode');
    
    if (hasDarkCookie || hasLightCookie) {
        return; // 存在手动设置的cookie，不执行自动切换
    }

    // 没有手动设置的cookie，执行自动切换逻辑
    $('html').removeClass('darkMode lightMode');
    if (shouldUseDarkMode()) {
        $('html').addClass('darkMode');
        ips.utils.cookie.set('darkMode', true, true);
    } else {
        $('html').addClass('lightMode');
        ips.utils.cookie.set('lightMode', true, true);
    }
}

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