切换图标不显示，除非我点击它

Question

我正在使用深色模式代码。使用此代码，我想使用相应的图标在暗模式和亮模式之间切换。这非常有效，但唯一的问题是 dark/light 图标在页面加载时默认不显示。如果我单击该图标，则只会显示它。如何让它在页面加载时默认显示。

这是我使用的代码：

  const switcher = document.querySelector("#switcher");
    switcher.setAttribute('src', '...LIGHT-MODE-1.png');

    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme) {
        document.documentElement.setAttribute('data-theme', currentTheme);
        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
        }
    }

    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
            switcher.setAttribute('src', '...LIGHT-MODE-1.png');
        } else {
            document.documentElement.setAttribute('data-theme', 'light');
            localStorage.setItem('theme', 'light');
            switcher.setAttribute('src', '...DARK-MODE-1.png');
        }
    }
    toggleSwitch.addEventListener('change', switchTheme, false);

<!--The icon HTML-->


<label class="theme-switch" for="checkbox">
        <span title="Enable/disable Dark Mode"><img id="switcher" src=""></span>
        <input type="checkbox" id="checkbox" /></label>

感谢您的帮助和时间！

Answer 1

您似乎错过了第一次暗模式检查中的 src 更改：

if (currentTheme === 'dark') {
    toggleSwitch.checked = true;
    switcher.setAttribute('src', '...DARK-MODE-1.png');
}

更新： 我建议创建一个设置主题的函数，而不是所有重复的代码，然后您可以从任何地方调用它。这将允许您在初始加载和单击时使用它：

const switcher = document.querySelector('#switcher');
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);

    const src = '/path/to/images/' + (theme === 'light' ? 'LIGHT-MODE-1.png' : 'DARK-MODE-1.png');
    switcher.setAttribute('src', src);
}

const theme = localStorage.getItem('theme') || 'light';
setTheme(theme);

toggleSwitch.addEventListener('change', (e) => {
    const theme = e.currentTarget.checked ? 'dark' : 'light';
    setTheme(theme);
});

Fiddle: https://jsfiddle.net/fjzue6wa/1/

切换图标不显示，除非我点击它

Toggle icon not showing unless I click it

html

javascript

darkmode