暗黑模式切换时响应式Logo图片无法恢复的技术问题排查

DevOps 小满

2026-8-6

解决大断点下暗黑模式切换后Logo无法恢复浅色模式的问题

问题原因

切换回浅色模式时，大断点（min-width:1025px）对应的logo-large标签srcset被设置为img/logo-light-mode.png，但初始值是img/logo-white-mode.png，路径不匹配导致无法正确加载浅色Logo
依赖img.src判断当前模式时，浏览器会返回绝对路径，indexOf('logo-white-mode.png')可能因路径格式差异判断失效

修复方案

修正浅色模式下大断点Logo的路径，与初始值保持一致
改用开关的checked状态判断当前模式，避免路径判断的不确定性
简化逻辑，直接根据开关状态设置对应资源

修改后的JavaScript代码

const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', () => {
    document.body.classList.toggle('dark');
    chngimg();
});

function chngimg() {
    const isDarkMode = checkbox.checked;
    const logo = document.getElementById('logo');
    const logoLarge = document.getElementById('logo-large');
    const logoTab = document.getElementById('logo-tab');
    const logoMob = document.getElementById('logo-mob');
    const header = document.getElementById('header');
    const footer = document.getElementById('footer');

    if (isDarkMode) {
        // 暗黑模式资源
        logo.src = 'img/logo-dark-mode.png';
        logoLarge.srcset = 'img/logo-dark-mode.png';
        logoTab.srcset = 'img/tab-dark.jpg';
        logoMob.srcset = 'img/mob-dark.jpg';
        header.style.borderBottom = '1px solid #cccccc';
        footer.style.borderTop = '1px solid #cccccc';
    } else {
        // 浅色模式资源，修正大断点路径
        logo.src = 'img/logo-white-mode.png';
        logoLarge.srcset = 'img/logo-white-mode.png';
        logoTab.srcset = 'img/tab-light.jpg';
        logoMob.srcset = 'img/mob-light.jpg';
        header.style.borderBottom = '1px solid #2b2b2b';
        footer.style.borderTop = '1px solid #2b2b2b';
    }
}