如何让浏览器保存暗黑模式设置并实现无延迟加载？

问题出在你当前的代码依赖$(document).ready()事件——这个事件要等DOM完全构建完成才会触发，浏览器在此之前已经渲染了浅色模式的页面，所以会出现切换延迟。

解决方案：提前在<head>中执行暗黑模式判断 #

把暗黑模式的检查逻辑移到HTML的<head>标签里，在页面开始渲染前就执行，直接用原生JavaScript（不需要依赖jQuery加载），这样页面一开始就会应用对应的模式。

步骤1：在<head>中添加原生JS代码

将这段代码放在你的CSS样式之后、页面内容之前：

// 立即检查并应用暗黑模式偏好
(function() {
    const darkModeSaved = localStorage.getItem('darkMode');
    if (darkModeSaved === 'true') {
        // 给html元素添加dark-mode类（如果你的CSS是针对body，就换成document.body）
        document.documentElement.classList.add('dark-mode');
    }
})();

步骤2：调整原有的jQuery代码

原代码只需要负责同步切换按钮的状态，以及处理切换事件即可：

var $jDarkMode = jQuery.noConflict();

$jDarkMode(function($) {
    var darkModeToggle = $('#darkModeToggle');
    var htmlEl = $(document.documentElement);

    var setDarkModePreference = function(value) {
        localStorage.setItem('darkMode', value);
    };

    // 同步切换按钮的状态
    var syncToggleState = function() {
        var darkModeSaved = localStorage.getItem('darkMode');
        darkModeToggle.prop('checked', darkModeSaved === 'true');
    };

    // 处理切换事件
    darkModeToggle.on('change', function() {
        const isChecked = darkModeToggle.prop('checked');
        htmlEl.toggleClass('dark-mode', isChecked);
        setDarkModePreference(isChecked.toString());
    });

    syncToggleState();
});

原理说明 #

• <head>中的立即执行函数会在浏览器解析页面内容前运行，直接给根元素添加dark-mode类，CSS会立即生效，避免页面先渲染浅色模式再切换。
• 移除了原代码中依赖DOM ready的模式切换逻辑，只保留按钮状态同步和交互处理，提升效率。

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